[GraphQL] apollo-client의 사용

Apollo Client : GrpahQL API를 호출하기 위해 사용되는 라이브러리

패키지 설치

$ npm i apollo-boost graphql react-apollo

apollo-client 생성 & React에 Apollo Client 연결

먼저, Apollo Client를 생성해야 하는데, 이 때 호출할 GraphQL API의 접속 정보를 설정해줘야 합니다.

apollo-boost 패키지에서 임포트한 ApolloClient 생성자 함수의 인자로 uri 속성이 포함된 설정 객체를 넘기면 됩니다.

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

export default function App({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: "http://practice.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Component />
    </ApolloProvider>
  );
}

GraphQL API 호출

React에서 Apollo Client를 사용해서 좀 더 간편하게 GraphQL API를 호출할 수 있도록 react-apollo 패키지는 Query와 Mutation 컴포넌트를 제공합니다.

import { gql, useMutation } from "@apollo/client";

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

export default function GraphqlMutationPage() {
  const [myFunc] = useMutation(CREATE_BOARD);

  const onClickSubmit = async () => {
    const result = await myFunc();
    console.log(result);
  };

  return <button onClick={onClickSubmit}>GRAPHQL-API(동기) 요청하기</button>;
}

---

VS Code 내에서의 HTTP 요청

선언

const [createBoard] = useMutation(CREATE_BOARD)

할당

const CREATE_BOARD = gql`
    mutation createBoard($createBoardInput: CreateBoardInput!){
        createBoard(createBoardInput:$createBoardInput){
            _id
        }
    }

사용

	async function requestApi(){
        const result = await createBoard({
            variables: {
                createBoardInput: {
                    writer:name,
                    password:password,
                    title:title,
                    contents:content
                }
            }
        })
        console.log(result.data.createBoard._id)
	}