[GraphQL] Query 와 Mutation

query와 mutation을 사용하기 위해서는 _app.js에 설정해줘야 하는 게 있다.

_app.js

import { ApolloProvider, InMemoryCache, ApolloClient } 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 {...pageProps} />
    </ApolloProvider>
  );
}

 

http://practice.codebootcamp.co.kr/graphql

위 사이트에서 Back-end 개발자가 만들어놓은 API를 이용할 수 있다.(나중에 더 공부해서 나도 직접 GraphQl API를 만들어봐야지..)

 

Query는 조회

Mutation은 생성, 수정, 삭제

 

Docs는 사용 방법을 적어 놓은 것

createBoard는 mutation으로 게시글을 생성한다.

fetchBoard는 query로 등록된 게시글을 조회 할 수 있다.

이렇게 playground를 통해 미리 확인을 해보고 코드를 복사한 다음 vscode로 붙여넣기 해서 사용하는 방법이 에러도 안나고 더 편하게 사용 할 수 있다.