GraphQL 사용법

Apollo 란?

Apollo는 GraphQl을 통해 서버와 통신하고 캐시로 저장하는 상태 관리 라이브러리입니다. 하지만 꼭 서버에 국한되지 않고 완전히 독립적으로 사용될 수 있어서 로컬 상태관리로도 많이 쓰입니다.

apollo-client 셋팅

apollo-client 라이브러리를 설치한 후, 전역 설정을 위해 '_app.js' 파일에서 컴포넌트를 ApolloProvider로 감싸줍니다.

이후 Apollo의 캐쉬 저장공간을 client로 만들어 Provider에 전달해 줍니다

// pages/_app.js

import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client'

function MyApp({ Component, pageProps }){
	const client = new ApolloClient({
		uri: "백엔드 주소",
		cache: new InMemoryCache()
	})

	return (
		<ApoloProvider client={client}>
			<Component {...pageProps}/>
		</ApolloProvider>
	)
}

vscode에서 직접 써보기

1. graphQL을 사용하기 전, playground에서 우리가 사용하려는 api 함수가 제대로 작동하는지 확인합니다.

2. 만약, 제대로 작동한다면, graphql mutation을 실행하려는 페이지 상단에서, apollo-client 의 도구들을 불러옵니다.

// graphql 요청에 필요한 도구 불러오기
import { useMutation, gql } from '@apollo/client'

3. javascript 입력 부분에 playground의 코드를 복사하여 아래와 같이 gql`` 사이에 붙여넣어 변수/상수를 만들어 줍니다.

아래의 CREATE_BOARD를 대문자로 만든 것은 관례입니다.

// graphql 코드 생성
const CREATE_BOARD = gql`
	mutation {
		createBoard(
			// 보내줄 값들
			writer: "훈이",
			password: "1234",
			title: "안녕하세요 훈이에요",
			contents: "반갑습니다"
		){
			// 받아올 값
			message
		}
	}
`

4. 위에서 만든 gql 변수/상수를 활용하여, useMutation을 만들어 줍니다.

나의함수는 mutation을 실행하기 위한 이름입니다.

따라서 aaa 등, 아무 이름을 붙여도 괜찮습니다.

하지만 보통 API 이름과 맞춰서 사용하는게 일반적이므로 여러분들은 현업에 나가서 API 이름과 통일해서 적어주시면 좋습니다.

// mutation 코드 생성
const [나의함수] = useMutation(CREATE_BOARD)

5. 게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행해 줍니다.

function handleClickPost(){

	createBoard({
			variables: {
					aaa: "훈이",
					bbb: "1234",
					ccc: "안녕하세요 훈이에요",
					ddd: "반갑습니다"
			}
	})
	return (
		<button onClick={handleClickPost}>게시물 등록</button>
	)
}

6. 게시물이 정상적으로 등록되는지 확인해 줍니다.

게시물이 정상적으로 등록 되었어도 위와 같은 코드에서는 variables 안의 값이 일정하기 때문에 항상 같은 게시물이 등록되는 문제점이 있습니다.

따라서, 위 코드의 variables 부분이 변경될 필요가 있습니다.

argu에 state값 넣어주기

위의 방법은 하드코딩으로 같은 값만 들어간다는 문제가 있었습니다.

하지만 우리는 user가 입력한대로 DB에 저장해줘야 하기때문에 값이 매번 바뀌어야 합니다. 그래서 하드코딩한 값 대신 state를 argu로 넣어주면 변동적으로 값이 들어가게 됩니다.

즉, graphql에 데이터는 최종적으로 등록하기 버튼을 눌렀을 때, 실행되는 handleClickPost 함수에서 실행되는 mutation 에서 넣어 주어야 합니다.

async / await 적용

api를 사용해서 요청에 대한 응답으로 받은 객체(JSON)을 변수에 담아서 사용하기 위해, 우리는 통신이 완료될 때까지 기다려야 합니다. 때문에 async / await를 사용해 통신이 완료될 때 까지 기다린 후 변수에 값을 담아지게 합니다.

async function handleClickPost(){
	const result = await createBoard({
		variables: {
			aaa: "훈이",															bbb: "1234",
			ccc: "안녕하세요 훈이에요",
			ddd: "반갑습니다"
		}
	})
	console.log(result)
}

return (
	<button onClick={handleClickPost}>게시물 등록</button>
)