[FE] GraphQL, apollo-client 사용법

시작하기 전 참고: Next.js 설치한 경로와 파일들을 바탕으로 정리했습니다!

0. 세팅

graphql api에서 요청과 응답을 하기 위해서는 apollo-client라는 라이브러리 세팅이 필요하다.
먼저 프로젝트 파일/pages/_app.js에 들어가서 다음과 같이 코드를 수정한다.

import "../styles/globals.css";
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
function MyApp({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: ""//graphql api를 요청할 백엔드 서버 주소
    cache: new InMemoryCache(),
  });
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

이때 uri가 url이랑 헷갈렸는데 오타 나지 않도록 주의하자.
찾아보니까 "A parsed URI, such as a URL."로써 uri가 url보다 더 큰 범위이고, i가 identifier, 식별자를 의미한다고 한다.

1. playground에서 query 혹은 mutation 실행

js파일에 요청 코드를 작성하기 전, api 테스트가 가능한 playground에 들어가서 query 혹은 mutation을 실행해봐야 오류가 생기는 일을 방지할 수 있다!

2. JS파일에서 apollo-client 불러오기

예시 코드는 버튼을 누르면 createBoard API를 요청해서 게시글을 등록하는 과정을 나타냈다.

2-1. 제대로 작동하면, js파일에서 import로 apollo-client를 불러온다.
mutation을 실행할 경우 {}안에 useMutation을 넣고
query를 실행할 경우 useQuery를 넣는다.

import { useMutation, gql } from '@apollo/client' 

2-2. playground에서 테스트 했던 코드를 복사한 뒤 다음과 같이 새로 만든 변수에 붙여넣는다.

const CREATE_BOARD = gql`
	mutation {
		createBoard(writer: $writer, title: $title, contents: $contents){
			_id
			number
			message
		}
	}
 `;

이때 createBoard외에 한 번에 여러개 요청을 처리할 수 있는데, 이때 작업이름(operation name)을 정할 수도 있다.

const CREATE_BOARD = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {

    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }


  }
`;

mutation(operation type) 바로 옆에 써있는 createBoard가 작업 이름(operation name)이고 파라미터에는 변수와 변수의 타입을 적는다. 요청할 때 동적으로 데이터를 넘기기 위해 $로 시작해서 변수명을 작성한다.

2-3. 그다음, 만든 변수를 이용해서 useMutation안에 넣어준다. state처럼 []안에 넣어서 선언한다.

const [createBoard] = useMutation(CREATE_BOARD)

2-4. 마지막으로 이벤트 핸들러 함수에 callGraphql 변수를 넣어주면 끝!

const onClickSubmit = async () => {
 
 const result = await createBoard({
   variables: {
     title: "제목 들어갈 곳",
     contents: "내용 들어갈 곳",
   },
 });
 
};

이 때 동적으로 사용자가 입력한 데이터를 요청받아 처리하려면 useState를 이용해서 변수를 만들고 이벤트 핸들러 함수에 variables:{} 객체 안에 변수들을 정의해야한다.

rest와 마찬가지로 graphQL에서도 통신이 완료될 때까지 기다리기 위해 async,await를 넣었다.