apollographql/apollo-client

apollo-client은(는) 무엇을 하나요?

Apollo Client 4.x를 사용하여 React 애플리케이션을 구축하기 위한 가이드입니다. 이 기술은 다음 경우에 사용합니다: (1) React 프로젝트에서 Apollo Client 설정, (2) 훅을 사용한 GraphQL 쿼리 또는 뮤테이션 작성, (3) 캐싱 또는 캐시 정책 구성, (4) 반응형 변수를 사용한 로컬 상태 관리, (5) Apollo Client 오류 또는 성능 문제 해결.

설치

npm install @apollo/client graphql

기본 설정

ApolloProvider를 사용하여 React 컴포넌트 트리에 Apollo Client를 연결합니다.

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

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache()
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h1>내 Apollo 앱</h1>
      </div>
    </ApolloProvider>
  );
}

쿼리 실행

useQuery 훅을 사용하여 데이터를 가져옵니다.

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

const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
    }
  }
`;

function ItemsList() {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

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

뮤테이션 실행

useMutation 훅을 사용하여 데이터를 변경합니다.

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

const ADD_ITEM = gql`
  mutation AddItem($name: String!) {
    addItem(name: $name) {
      id
      name
    }
  }
`;

function AddItemForm() {
  let input;
  const [addItem, { data, loading, error }] = useMutation(ADD_ITEM);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addItem({ variables: { name: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">항목 추가</button>
      </form>
      {loading && <p>처리 중...</p>}
      {error && <p>오류: {error.message}</p>}
    </div>
  );
}

캐시 구성

InMemoryCache를 사용하여 캐시 정책을 설정합니다.

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

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        items: {
          merge(existing, incoming) {
            return incoming;
          }
        }
      }
    }
  }
});

로컬 상태 관리

반응형 변수를 사용하여 로컬 상태를 관리합니다.

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

export const cartItemsVar = makeVar([]);
export const isLoggedInVar = makeVar(false);

컴포넌트에서 사용:

import { useReactiveVar } from '@apollo/client';
import { cartItemsVar } from './cache';

function Cart() {
  const cartItems = useReactiveVar(cartItemsVar);

  return (
    <div>
      <h2>장바구니</h2>
      {cartItems.length === 0 ? (
        <p>장바구니가 비어 있습니다.</p>
      ) : (
        <ul>
          {cartItems.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

오류 처리

onError 링크를 사용하여 전역 오류를 처리합니다.

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

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(`[GraphQL 오류]: 메시지: ${message}, 위치: ${locations}, 경로: ${path}`)
    );
  }
  if (networkError) {
    console.log(`[네트워크 오류]: ${networkError}`);
  }
});

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

성능 최적화

• 필요한 필드만 요청하세요.
• 쿼리 결과를 효율적으로 캐시하기 위해 id 필드를 포함하세요.
• 자주 변경되지 않는 데이터에는 useQuery의 pollInterval 옵션을 사용하세요.
• 큰 리스트에는 fetchMore를 사용한 페이지네이션을 고려하세요.