[GraphQL][React] apollo-client 세팅하기 - React, Typescript

아래는 apollo-client의 세팅방식으로 React를 사용한 서버에 apollo-client를 적용하여 구성했다.

이 포스팅은 React를 활용하기만 할 뿐 apollo-client의 세팅을 위주로 작성되며 React관련 내용은 다루지 않는다. React 세팅방법 참고

1. 애플리케이션에 'apollo-client' Dependency 추가

# npm 사용할 경우
> npm i @apollo/client graphql

# yarn 사용할 경우
> yarn add @apollo/client graphql

2. main.ts(main.js)에서 Apollo client server 생성하여 React 앱과 연동

import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client';

const httpLink = createHttpLink({
  // 연결할 'apollo-server'의 url
  uri: 'http://localhost:4000/graphql',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      // 각자 프로젝트에 맞게 설정
      fetchPolicy: 'cache-and-network',
    },
  },
});

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <ApolloProvider client={client}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ApolloProvider>
)

간단하게 정리하자면 apollo-client 서버를 생성하여 ApolloProvider 노드에게 파라미터로 전달해주고 ApolloProvider 노드로 React의 App 노드를 감싸주면 된다. 참고로 BrowserRouter는 React의 라우팅을 위해 사용한다.

client에게 전달한 httpLink는 NodeJS의 내장 라이브러리인 createHttpLink 함수를 통해 생성하였다. 이렇게 하면 server-side의 apollo-server와 연결이 되고 세팅은 다 끝났다고 볼 수 있다.

client에게 전달한 InMemoryCache 객체는 Apollo에 내장된 캐싱 기능을 하는 객체로 매우 핵심적인 기능중 하난데, apollo-client에서는 React Query처럼 useQuery, useMutation 등의 hook을 사용하여 API를 호출하는데 이 통신의 효율성을 위해 한번 쿼리된 결과를 캐싱하여 메모리에 저장해둔다.

이게 'Apollo란?' 포스팅에서 설명한 전역 상태 관리 기능에 사용되는 것이다. 쿼리된 결과를 메모리상에 저장해두기 때문에 다른 컴포넌트에게 그 값을 redux 등을 사용해 전달할 필요 없이 쿼리하여 메모리에서 가져다 쓸 수 있게 된다.

그러므로 watchQuery에서 설정한 fetchPolicy가 매우 중요한 것이다. 캐시처리를 어느정도로 할 지를 프로젝트의 성격이나 개발자의 취향 등에 맞게 설정하되 잘 설정하면 자원을 매우 절약할 수 있다.

---

참조

[GraphQL] apollo-server 세팅하기 - NodeJS (apollo-server-express)

[GraphQL][React] apollo-client에 Header 설정하기 - JWT