🧩 개요

Apollo Client는 GraphQL API와 상호작용하기 위한 가장 널리 사용되는 클라이언트 라이브러리입니다. React, Vue 등 다양한 프론트엔드 프레임워크에서 사용할 수 있으며, 특히 React에서는 상태 관리, 캐싱, 데이터 페칭을 통합적으로 처리할 수 있는 도구로 자리잡고 있습니다.

🚀 주요 특징

• GraphQL API 통신 지원
• 자동 캐싱 (InMemoryCache)
• React Hooks 기반 API (useQuery, useMutation)
• 로컬 상태 관리 기능 내장 (@client, makeVar)
• 타입스크립트 및 Codegen 완벽 호환
• SSR/CSR 지원

🛠️ 기본 설정

yarn add @apollo/client graphql

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

export const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
});

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

<ApolloProvider client={client}>
  <App />
</ApolloProvider>

📡 데이터 요청 (쿼리)

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

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

const UserList = () => {
  const { data, loading, error } = useQuery(GET_USERS);

  if (loading) return <p>로딩 중...</p>;
  if (error) return <p>오류 발생: {error.message}</p>;

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

✍️ 데이터 변경 (뮤테이션)