🔙뒤로가기

Apollo Client는 GraphQL API와 통신하기 위해 널리 사용되는 클라이언트 라이브러리이다. React, Vue, Angular 등 다양한 프론트엔드 프레임워크와 함께 사용할 수 있으며, 캐싱, 상태 관리 등의 기능을 제공한다.

Apollo Client 설치 및 설정

먼저, npm 또는 yarn을 이용하여 Apollo Client를 설치한다.

npm install @apollo/client graphql

설치가 완료되면, ApolloClient 인스턴스를 생성하고 이를 앱에 연결한다. 이때, GraphQL 서버의 URL을 설정해야 한다

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

const client = new ApolloClient({
  uri: '<http://localhost:4000/graphql>',
  cache: new InMemoryCache(),
});

쿼리 및 뮤테이션 실행

Apollo Client를 사용하면, **useQuery**와 **useMutation**과 같은 훅을 통해 쿼리와 뮤테이션을 쉽게 실행할 수 있다.

사용자 정보를 불러오는 쿼리를 실행하는 코드 예시는 다음과 같다.

import { gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: String!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

client
  .query({
    query: GET_USER,
    variables: { id: '1' },
  })
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

React와 Apollo Client 통합

React 애플리케이션에서 Apollo Client를 사용하려면 ApolloProvider 컴포넌트를 사용하여 Apollo Client 인스턴스를 애플리케이션에 연결해야 한다. 그런 다음 **useQuery**나 **useMutation**과 같은 훅을 사용하여 쿼리와 뮤테이션을 실행할 수 있다.

import { ApolloProvider, useQuery, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: String!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function User({ id }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id },
  });

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      <h2>{data.user.name}</h2>
      <p>{data.user.email}</p>
    </div>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <User id="1" />
    </ApolloProvider>
  );
}