[React] GRAPHql

const [실행함수] = useMutation()

apollo-client 셋팅

~~

graphql 뮤테이션 실행해보기

1. 페이지 상단에서 apollo-client 도구 불러오기

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

2. js입력 부분에 실행할 mutation 코드를 gql 사이에 붙여넣고 변수 만들어주기

const 나의그래프ql셋팅 = gql`
  mutation {
    createBoard(
      writer: "123"
      title: "제목입니다~~"
      contents: "내용이에요!!!"
    ) {
      _id
      number
      message
    }
  }
`;

3. gql 변수를 활용하여, useMutation을 만들어주기

>```jsx
const [나의함수] = useMutation(나의그래프ql셋팅);

실습
1. index.js

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

//셋팅은 함수 바깥쪽에 작성해준다.
const 나의그래프ql셋팅 = gql`
  mutation {
    createBoard(
      writer: "123"
      title: "제목입니다~~"
      contents: "내용이에요!!!"
    ) {
      _id
      number
      message
    }
  }
`;

export default function GraphQlMutationPage() {
  const [나의함수] = useMutation(나의그래프ql셋팅);

  const onClickSubmit = async () => {
    const result = await 나의함수();
    console.log(result);
  };

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

2. _app.js

import "../styles/globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

//모든 페이지에 셋팅해주기
function MyApp({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: "http://example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(), //컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 모두 임시로 저장해놓기
  });

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

export default MyApp;

결과