GraphQL

BuDuDak·2021년 7월 18일

📌 GraphQL ?

❗️ GraphQL 은 페이스북에서 만든 query 언어
web 이나 app을 구현할때 API 를 사용하여 기능을 구현하는데, 기능이 필요할 때 사용자가 필요한 데이터만을 골라 받아 사용 할 수 있게 해주는 것이 graphql

❓ query 언어란?

query 는 데이터베이스(DB)에 정보를 요청하는 것

웹 서버에 정보를 보여달라는 요청에 의한 처리를 query 라고 함

쉽게 말해, DB 에 접속해, 데이터를 입력, 조회, 수정, 삭제 하고 싶을때 DB 에 명령을 내리는 것이 query

🕹 설치방법

// 사용할 폴더에서 
`npm install @apollo/client graphql`

🕹 초기세팅

❗️ 설치한 폴더의 _app.js 내부에 작성

📌 GraphQL의 구조

graphql 은 CRUD 를 query 와 mutation 으로 나누었는데,

데이터를 변조(Create, Update, Delete)하는 Mutation
데이터를 읽는(Read)하는 Query

두 가지로 나뉘어 있다.

📌 Apollo-Client

graphql은 query 언어이기에 자체적으로 할 수 있는 것이 없다.

이를 구체적으로 활용할 수 있도록 도와주는 라이브러리들이 있는데 나는 그 중 Apollo-client 를 사용한다

❓ Apollo ?

Apollo 는 gql 의 라이브러리 중 하나로, 상태 관리 플랫폼이다.

Apollo 를 통해 query 나 mutation 을 전송해 API 서버에서 데이터를 전해 받게 되면, 사용자는 네트워크단의 HTTP 요청을 번거롭게 신경 쓸 필요가 없어진다.

한마디로 정리하면 편하다

📌 GraphQL의 요소

query 는 DB 로 부터 데이터를 얻어오기 위해 사용한다.

query 에서 받아올 정보를 정하고

변수에 담아 사용할 수 있다.

mutation 은 서버,DB 의 데이터를 변경하기 위해 사용한다.

여기서 deleteBoard 가 받는 필수요소 boardId 의 이름을 aaa로 지정하여 연결하였다.

위의 fetchBoard 에서 가져온 정보들이 담겨있는 {data}는

이렇게 화면에 직접 호출해 사용할수도 있다.

📌 GraphQL 실사용

PlayGround의 입력 정보를 확인하며 사용하게 되는데,

const CREATE_BOARD = gql`			// CREATE_BOARD 라는 상수에 gql 을 담아준다
	mutation qqq($aaa:String, $bbb:String, $ccc:String, $ddd:String){				
						// gql 의 mutation을 사용 할거고 얘이름은 qqq다,
						// qqq가 받는 인자는 여러개가 있는데 그중  
						// writer,password,title,contents를 쓸거고 얘네의 타입은 이거다.
		createBoard(			// mutation 중 createBoard 기능을 쓸건데,
			writer : $aaa,		// createBoard 안의 인자들은 이거 이거인데, 값을 넣어줄때 사용할 이름은 $aaa, $bbb, $ccc ... 이다
			password : $bbb,
			title : $ccc,
			contents : $ddd,
	){
		message				// return값으로는 이걸 받겠다.
	}
}
`

❗️ gql상수 (CREATE_BOARD) 가 모두 대문자로 쓰이는 것은 관례라고 한다

위에서 만든 CREATE_BOARD (gql 상수)를 이용해 useMutation을 만든다
const [createBoard] = useMutation(CREATE_BOARD)
//(위 createBoard는 mutation을 실행하기 위한 이름, 아무거나 상관 없음) 

버튼을 눌렀을때 실행되는 함수에서 위의 mutation 코드 실행

function onClickPost(){
	createBoard({
    	variables: {	 // 위에서 지정한 writer,password ... 의 연결 이름들을 통해 작성
			aaa : "뚱이",
          		bbb : "123",
          		ccc : "안녕",
          		ddd : "난 뚱이야",
		}
    })
}

하지만 위의 방식으로 작성하면 항상 고정된 값만 데이터에 들어가기에 state 를 이용하여 실사용한다.

📌 async / await

gql 을 사용하면 요청에 대한 응답으로 받은 객체를 변수에 담아 사용하게 된다.

여기서 응답 결과를 변수에 담기 위해서는 통신이 완료될 때까지 기다려야하는데,

응답 결과를 받기도 전에 페이지 구성이 먼저 되어 응답결과가 화면에 출력되지 않는 경우가 생기기 때문.

그렇기에 통신이 완료될 때까지 기다리게 하는 명령이 async / await

async function onClickPost(){
	const result = await createBoard({
    	variables : {
        	aaa : "뚱이",
		bbb : "123",
          	ccc : "안녕",
          	ddd : "난 뚱이야"
        }
    })
}

📌 try / catch

Backend 컴퓨터의 문제나, 게시물의 갑작스러운 삭제 등 여러가지 실패 가능성이 생긴다.

그렇기에 실패에 대한 처리도 필요하다.

try{
	await createBoard({
    	variables : {
        	aaa : "뚱이",
		bbb : "123",
          	ccc : "안녕",
          	ddd : "난 뚱이야"
        }
    })
} catch(error){
  alert(error.message)	// Backend 개발자가 보내는 실패 메세지
}