GraphQL Code Generatorで効率的に型安全なReactコードを書く

作成日 2025.03.03
React
React

GraphQLは、クエリの記述方法を強化し、データのやりとりを効率化する強力なツールです。ReactアプリケーションでGraphQLを活用する際、型安全なコードを書くためにはGraphQL Code Generatorが非常に役立ちます。このツールを使用することで、型の整合性を保ちながら効率的にReactコードを開発できます。

1. 1. GraphQL Code Generatorとは
2. 2. GraphQL Code Generatorのインストール
3. 3. スキーマファイルの準備
4. 4. GraphQL Code Generatorの設定ファイル
5. 5. クエリの作成
6. 6. 自動生成された型の活用
7. 7. GraphQLとReact Queryの統合
8. 8. クエリのパラメータと型のマッピング
9. 9. ミューテーションの型安全な実行
10. 10. 型安全なレスポンスの利用
11. 11. エラーハンドリングの強化
12. 12. 型安全なキャッシュ操作
13. 13. 複雑なクエリやミューテーションへの対応
14. 14. ベストプラクティス

1. GraphQL Code Generatorとは

GraphQL Code Generatorは、GraphQLのスキーマやクエリから型定義やAPI呼び出しのコードを自動的に生成するツールです。このツールを使用することで、手動で型を記述する手間を省き、型安全を確保できます。

2. GraphQL Code Generatorのインストール

GraphQL Code GeneratorをReactプロジェクトに導入するには、まず依存関係をインストールする必要があります。以下のコマンドでインストールします。

npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-query

3. スキーマファイルの準備

GraphQL Code Generatorを使用するには、まずGraphQLのスキーマファイルが必要です。スキーマファイルは通常、バックエンドで提供されるGraphQL APIの構造を記述したファイルです。

4. GraphQL Code Generatorの設定ファイル

GraphQL Code Generatorを設定するには、codegen.ymlという設定ファイルをプロジェクトのルートに作成します。このファイルでどのクエリを生成し、どのプラグインを使用するかを指定します。

schema: "http://localhost:4000/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-query"

5. クエリの作成

Reactで使用するGraphQLのクエリやミューテーションを作成します。これらのクエリは、GraphQL Code Generatorによって型安全なコードに変換されます。

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

export const GET_USER = gql`
  query GetUser {
    user {
      id
      name
      email
    }
  }
`;

6. 自動生成された型の活用

GraphQL Code Generatorは、クエリやミューテーションから型を生成します。これにより、Reactコンポーネント内でのデータの型が保証され、型安全に扱えるようになります。

import { useQuery } from 'react-query';
import { GET_USER } from './queries';
import { GetUserQuery } from './generated/graphql';

const UserComponent = () => {
  const { data, isLoading, error } = useQuery<GetUserQuery>(GET_USER);

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

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

7. GraphQLとReact Queryの統合

GraphQL Code Generatorでは、React Query用の型も自動生成できます。これにより、GraphQLクエリを効率的にReact Queryと統合し、型安全を保ちながらデータを取得できます。

8. クエリのパラメータと型のマッピング

クエリにパラメータを追加すると、GraphQL Code Generatorはその型も自動的に生成します。これにより、クエリの引数も型安全に扱えます。

export const GET_USER_BY_ID = gql`
  query GetUserById($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

export type GetUserByIdVariables = {
  id: string;
};

9. ミューテーションの型安全な実行

GraphQLのミューテーションもGraphQL Code Generatorで型安全に扱うことができます。これにより、ミューテーションのレスポンスや変数も型安全に処理できます。

import { useMutation } from 'react-query';
import { CREATE_USER } from './mutations';
import { CreateUserMutation } from './generated/graphql';

const CreateUserComponent = () => {
  const mutation = useMutation<CreateUserMutation>(CREATE_USER);

  const handleSubmit = (userData: { name: string; email: string }) => {
    mutation.mutate(userData);
  };

  return <button onClick={() => handleSubmit({ name: 'John', email: 'john@example.com' })}>Create User</button>;
};