GraphQL [백엔드 구현기 1] 위의 페이지에 이어서 작성하는 글입니다.

이제 Client를 연결해야한다.

이를 위해 Apollo Client 공식 문서를 살펴보며 파악했다.

Introduction to Apollo Client

아하 Apollo Client 는 GraphQl 을 사용해 데이터를 모두 관리할 수 있는 상태관리 라이브러리이고, UI 를 자동으로 업데이트하면서 애플리케이션 데이터를 가져오고, 캐시를 수정한다는 것을 알 수 있었다.

본격적으로 바로 구현에 들어갔다.

todo 1. Apollo Client 설정

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

const httpLink = new HttpLink({
  uri: "/api/graphql",
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

export default client;

전체 애플리케이션에 Apollo 클라이언트를 제공해야하므로 전역 설정을 _app.js에 진행한다.

import { ApolloProvider } from '@apollo/client';
import client from '../apollo/client';

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

export default MyApp;

todo 2. GraphQL 쿼리 작성 및 컴포넌트

각 컴포넌트에서 GraphQL 쿼리를 작성하고, Apollo Client의 useQuery 훅을 사용하여 데이터를 요청하는 로직을 구현했다.

마치며,

지금까지 공부한 내용이었고 이를 구현하려고 시도했지만 위의 client 설정 과정에서 오류 발생이었다.

시간이 2-3시간 남은 상황에서 디버깅하는 과정에서 오류를 이해하지 못한 채 구글링으로 찾아 연결을 하는 것은 의미가 없다고 생각해 구현을 포기하게되었다.