ReactとGraphQLを組み合わせた効率的なデータフェッチング

作成日 2025.03.11
React
React

ReactとGraphQLを組み合わせることで、効率的かつ柔軟なデータフェッチングが可能になります。この記事では、ReactアプリケーションでGraphQLを活用し、APIからデータを取得する方法や、最適なデータ管理手法について説明します。

1. GraphQLとは何か？
2. ReactでGraphQLを使う準備
3. Apollo Clientのセットアップ
4. GraphQLクエリを実行する
5. 変数付きクエリ
6. ミューテーションの使用
7. データのキャッシュ管理
8. エラーハンドリング
9. サブスクリプション
10. パフォーマンスの最適化
11. プロジェクトへの適用
12. まとめ

GraphQLとは何か？

GraphQLはAPIのクエリ言語であり、必要なデータのみを取得できます。これにより、オーバーフェッチやアンダーフェッチを防ぎます。

query {
  user(id: 1) {
    id
    name
    email
  }
}

ReactでGraphQLを使う準備

ReactアプリにGraphQLを導入するには、Apollo Clientがよく使われます。

npm install @apollo/client graphql

Apollo Clientのセットアップ

Apollo Clientを使用してGraphQLエンドポイントに接続します。

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

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

function App() {
  return (
    <ApolloProvider client={client}>
      <MyComponent />
    </ApolloProvider>
  );
}

GraphQLクエリを実行する

useQueryフックを使用してGraphQLクエリを実行します。

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

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

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

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

  return <h1>{data.user.name}</h1>;
}

変数付きクエリ

GraphQLでは動的に変数を渡してデータを取得できます。

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

ミューテーションの使用

データの追加や更新にはuseMutationフックを使用します。

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

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

function AddUser() {
  const [createUser] = useMutation(CREATE_USER);

  return (
    <button onClick={() => createUser({ variables: { name: 'New User' } })}>
      Add User
    </button>
  );
}