React에서 Apollo Client 사용법

 

React 애플리케이션에서 GraphQL을 효율적으로 사용하기 위해서는 Apollo Client를 사용하는 것이 일반적입니다. Apollo Client는 강력하고 유연한 GraphQL 클라이언트 라이브러리로, 데이터를 관리하고 API와 통신하는 데 필요한 다양한 기능을 제공합니다. 이 글에서는 React 애플리케이션에서 Apollo Client를 설정하고 사용하는 방법을 단계별로 설명합니다.

목차

1. Apollo Client란?
2. 설치 및 초기 설정
3. ApolloProvider로 클라이언트 연결
4. GraphQL 쿼리 작성 및 실행
5. GraphQL 뮤테이션 처리
6. 캐싱 및 데이터 관리
7. Apollo DevTools 활용
8. 결론

---

1. Apollo Client란?

Apollo Client는 GraphQL API와 상호작용할 수 있도록 도와주는 클라이언트 라이브러리입니다. React와 같은 UI 라이브러리와 결합하여 서버로부터 데이터를 가져오고 관리하는 데 유용합니다. 주요 특징은 다음과 같습니다:

• 간편한 GraphQL 쿼리 및 뮤테이션 실행: 서버와 데이터를 주고받는 작업을 단순화.
• 강력한 캐싱: 서버로의 요청 횟수를 줄이고 애플리케이션 성능을 최적화.
• 상태 관리: 로컬 및 원격 데이터를 일관된 방식으로 관리.
• 확장 가능성: 다양한 플러그인과 함께 사용 가능.

---

2. 설치 및 초기 설정

React 애플리케이션에서 Apollo Client를 사용하려면 관련 패키지를 설치해야 합니다.

2.1 Apollo Client 설치

npm install @apollo/client graphql

• @apollo/client: Apollo Client의 주요 라이브러리.
• graphql: GraphQL 스키마와 쿼리를 파싱하기 위한 필수 의존성.

2.2 Apollo Client 설정

Apollo Client를 설정하려면 ApolloClient 인스턴스를 생성하고, InMemoryCache와 GraphQL 서버의 URI를 지정해야 합니다.

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

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

---

3. ApolloProvider로 클라이언트 연결

React 컴포넌트에서 Apollo Client를 사용하려면 ApolloProvider로 애플리케이션을 감싸야 합니다.

import React from 'react';
import { ApolloProvider } from '@apollo/client';
import App from './App';
import client from './apolloClient'; // 위에서 설정한 ApolloClient 인스턴스

const Root = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

export default Root;

ApolloProvider는 React의 Context API를 활용하여 모든 컴포넌트에서 Apollo Client를 사용할 수 있도록 만듭니다.

---

4. GraphQL 쿼리 작성 및 실행

GraphQL 쿼리를 실행하려면 useQuery 훅을 사용합니다.

4.1 예제 쿼리 작성

query GetBooks {
  books {
    id
    title
    author
  }
}

4.2 React 컴포넌트에서 useQuery 사용

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

const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
      author
    }
  }
`;

const BookList = () => {
  const { loading, error, data } = useQuery(GET_BOOKS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.books.map((book) => (
        <li key={book.id}>{book.title} by {book.author}</li>
      ))}
    </ul>
  );
};

export default BookList;

---

5. GraphQL 뮤테이션 처리

데이터를 생성, 수정, 삭제하려면 useMutation 훅을 사용합니다.

5.1 예제 뮤테이션 작성

mutation AddBook($title: String!, $author: String!) {
  addBook(title: $title, author: $author) {
    id
    title
    author
  }
}

5.2 React 컴포넌트에서 useMutation 사용

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

const ADD_BOOK = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

const AddBookForm = () => {
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const [addBook, { data, loading, error }] = useMutation(ADD_BOOK);

  const handleSubmit = (e) => {
    e.preventDefault();
    addBook({ variables: { title, author } });
  };

  if (loading) return <p>Submitting...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        type="text"
        placeholder="Author"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
      />
      <button type="submit">Add Book</button>
    </form>
  );
};

export default AddBookForm;

---

6. 캐싱 및 데이터 관리

Apollo Client는 요청한 데이터를 자동으로 캐싱하여 효율적으로 관리합니다. 캐시를 업데이트하거나 초기화하는 방법은 다음과 같습니다.

6.1 캐시 업데이트

useMutation의 update 함수나 refetchQueries 옵션을 사용하여 캐시를 갱신할 수 있습니다.

addBook({
  variables: { title, author },
  refetchQueries: [{ query: GET_BOOKS }],
});

6.2 캐시 초기화

client.resetStore();

---

7. Apollo DevTools 활용

Apollo DevTools는 Apollo Client 상태를 디버깅하는 데 유용한 도구입니다. Chrome 및 Firefox 확장 프로그램으로 제공되며, 설치 후 GraphQL 요청과 캐시 상태를 실시간으로 확인할 수 있습니다.

• Apollo DevTools 설치 링크

---

8. 결론

React에서 Apollo Client를 활용하면 GraphQL API와 쉽게 통신하고, 데이터를 효율적으로 관리할 수 있습니다. 본 글에서 다룬 내용을 기반으로 Apollo Client를 설정하고 쿼리 및 뮤테이션을 실행하며, 캐싱과 DevTools까지 활용해 보세요. 이를 통해 더욱 강력하고 유지보수성이 높은 애플리케이션을 개발할 수 있을 것입니다.