React에서 graphql 사용하기

✏️ apollo-client 셋팅하기

• apollo-client를 설치한 후, 사용하기 위해서 setting이 필요하다.
• 설치한 도구들을 setting하는 위치는 일반적으로 _app.js 이다.
• index.js(페이지들)이 app.js로 합쳐져서 app.js가 실행되는 것이다.
• Component 자리에 index.js가 들어오게 되고, index.js가 합쳐진 app.js가 실행된다.
  • ApolloClient : graphql 세팅, API가 있는 위치를 모든 페이지에 알려주기 위해 세팅한다.
  • InMemoryCache : 나중에 꺼내서 쓰기위해 컴퓨터의 메모리에 백엔드에서 받아온 데이터를 임시로 저장한다.
  • ApolloProvider : 컴포넌트에서 client graphql 세팅을 사용할 수 있게 전달해준다.

// 모든 파일 공통 세팅하기
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'

export default function App({ Component, pageProps }) {

  // graphql 세팅
  const client = new ApolloClient({
    // API 있는 위치를 모든 페이지에 알려주기 위해 세팅
    uri: "http://practice.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache()  // 나중에 꺼내서 쓰기 위해 컴퓨터의 메모리에 백엔드에서 받아온 데이터 임시로 저장
  })

  return(
    <div>
      <div>=======여기는 _app.js 컴포넌트 시작 부분입니다.==========</div>
      {/* ApolloProvider -> 이 컴포넌트에서 client graphql 세팅을 사용할 수 있게 전달해준다. */}
      <ApolloProvider client={client}>
        {/* 각 페이지 컴포넌트 */}
        <Component {...pageProps} />  
      </ApolloProvider>
      <div>=======여기는 _app.js 컴포넌트 마지막 부분입니다.==========</div>
    </div>
  ) 
}

📌 apollo-client로 graphql mutation 실행

1. graphql mutation을 실행하려는 페이지 상단에서 graphql 요청에 필요한 apollo-client의 도구들을 불러온다.
2. gql을 사용하여 graphql 코드를 생성한다. -> 변수/상수가 생성됨.
3. 생성된 graphql 코드를 담은 변수를 활용하여 useMutaion을 만들어준다.
   • mutation을 실행하기 위한 함수는 보통 API 이름과 맞춰서 사용하는게 일반적이다.
4. 게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행해 준다.