리액트와 그래프QL: Apollo 클라이언트 사용하기

byCode Keeper •


리액트와 그래프QL: Apollo 클라이언트 사용하기


그래프QL(GraphQL)은 페이스북에서 개발한 쿼리 언어로, API에 대한 요청을 더 효율적으로 수행할 수 있게 해줍니다. 리액트(React)와 결합하면 데이터 관리가 매우 쉬워집니다. 이 포스팅에서는 Apollo 클라이언트를 사용하여 리액트 애플리케이션에서 그래프QL을 구현하는 방법을 자세히 살펴보겠습니다.


그래프QL과 Apollo 클라이언트의 중요성


그래프QL은 REST API의 단점을 보완하여 클라이언트가 필요한 데이터를 정확하게 요청할 수 있도록 합니다. 이를 통해 네트워크 요청의 효율성을 높이고, 클라이언트와 서버 간의 데이터 교환을 최적화할 수 있습니다. Apollo 클라이언트는 그래프QL을 사용하여 데이터를 관리하고 캐싱하는 데 도움을 줍니다. 이를 통해 리액트 애플리케이션에서 데이터 관리를 더욱 효율적으로 수행할 수 있습니다.


프로젝트 설정 및 Apollo 클라이언트 설치


리액트 프로젝트에서 Apollo 클라이언트를 사용하기 위해 필요한 패키지를 설치해야 합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 필요한 패키지를 설치합니다.


npx create-react-app my-apollo-app
cd my-apollo-app
npm install @apollo/client graphql

Apollo 클라이언트 설정


먼저 Apollo 클라이언트를 설정합니다. 이를 위해 ApolloProvider와 ApolloClient를 사용하여 클라이언트를 설정하고, 애플리케이션에 제공해야 합니다.


// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import App from './App';

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

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

위 코드에서 ApolloClient는 그래프QL 서버의 URI와 캐시 설정을 포함합니다. ApolloProvider는 애플리케이션의 최상위 컴포넌트를 감싸서 Apollo 클라이언트를 제공하도록 합니다.


그래프QL 쿼리 작성 및 사용


그래프QL 쿼리를 작성하고, 리액트 컴포넌트에서 이를 사용하는 방법을 살펴보겠습니다.


기본 그래프QL 쿼리 작성


먼저, 그래프QL 쿼리를 정의합니다. 예를 들어, 사용자 데이터를 가져오는 쿼리를 작성해보겠습니다.


// src/queries.js
import { gql } from '@apollo/client';

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

쿼리 실행 및 데이터 렌더링


리액트 컴포넌트에서 useQuery 훅을 사용하여 쿼리를 실행하고, 데이터를 렌더링합니다.


// src/App.js
import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_USERS } from './queries';

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

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

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

export default App;

위 코드에서 useQuery 훅을 사용하여 GET_USERS 쿼리를 실행하고, 로딩 상태, 오류 상태, 데이터를 반환받아 처리합니다.


그래프QL 뮤테이션 작성 및 사용


그래프QL 뮤테이션을 사용하여 데이터를 생성, 업데이트, 삭제할 수 있습니다.


기본 뮤테이션 작성


다음은 사용자를 생성하는 뮤테이션 예제입니다.


// src/mutations.js
import { gql } from '@apollo/client';

export const CREATE_USER = gql`
  mutation CreateUser($name: String!, $email: String!) {
    createUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

뮤테이션 실행 및 데이터 처리


리액트 컴포넌트에서 useMutation 훅을 사용하여 뮤테이션을 실행하고, 데이터를 처리합니다.


// src/CreateUser.js
import React, { useState } from 'react';
import { useMutation } from '@apollo/client';
import { CREATE_USER } from './mutations';
import { GET_USERS } from './queries';

const CreateUser = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [createUser, { data, loading, error }] = useMutation(CREATE_USER, {
    refetchQueries: [{ query: GET_USERS }],
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    createUser({ variables: { name, email } });
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Create User</button>
    </form>
  );
};

export default CreateUser;

위 코드에서 useMutation 훅을 사용하여 CREATE_USER 뮤테이션을 실행하고, 사용자가 생성된 후 GET_USERS 쿼리를 다시 실행하여 데이터를 최신 상태로 유지합니다.


캐싱과 데이터 관리


Apollo 클라이언트는 캐싱을 통해 네트워크 요청을 최소화하고, 성능을 최적화합니다. 기본적으로 InMemoryCache를 사용하여 데이터를 캐싱합니다.


캐싱 설정


캐싱 전략을 설정하여 데이터를 효율적으로 관리할 수 있습니다.


// src/index.js
import { InMemoryCache } from '@apollo/client';

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

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

위 코드에서 typePolicies를 사용하여 쿼리의 캐싱 동작을 정의할 수 있습니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Apollo 클라이언트를 사용하여 리액트 애플리케이션에서 그래프QL을 구현하는 방법에 대해 살펴보았습니다. 그래프QL과 Apollo 클라이언트를 사용하면 데이터 관리가 더욱 효율적이고, 최적화된 애플리케이션을 개발할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전