TypeScript with Apollo Client〜GraphQL コードジェネレーター〜

アプリケーションが成長すると、 Typed システムはバグを早期に発見し、全体的な開発エクスペリエンスを向上させるために不可欠なツールになる可能性があります。

GraphQL は Typed システムを使用して、GraphQL スキーマ内の各型とフィールドで利用可能なデータを明確に定義します。 GraphQL サーバーのスキーマは厳密に型指定されているため、GraphQL コードジェネレーターなどのツールを使用して TypeScript 定義を自動的に生成できます。生成された型を使用して、GraphQL 操作の入力と結果の型安全性を確保します。

以下では、フックとコンポーネントのタイプを生成するための GraphQL コードジェネレーターのインストールと構成について説明します。

プロジェクトを設定する
GraphQL コードジェネレーターを定義する
React フックで使用する
1. useQuery
2. useMutation
まとめ

プロジェクトを設定する

開発環境の設定を完了して置く必要があります。(関連記事：Frondend、Backend )

try🐶everything myproject$ yarn add -D typescript @graphql-codegen/cli @graphql-codegen/client-preset @graphql-typed-document-node/core

GraphQL コードジェネレーターを定義する

次に、プロジェクトのルートに codegen.ts という名前の GraphQL コードジェネレーターの構成ファイルを作成します。

// codegen.ts

// codegen.ts

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: "http://localhost:4000/graphql",
  documents: ['src/**/*.{ts,tsx}'],
  generates: {
    './src/__generated__/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        gqlTagName: 'gql',
      }
    }
  },
  ignoreNoDocuments: true,
};

export default config;

最後に、次のスクリプトを package.json ファイルに追加します。(Line 6-7)

// package.json

...
  "scripts": {
    ...
    "compile": "graphql-codegen",
    "watch": "graphql-codegen -w"
  },
...

yarn run compile を実行すると、codegen.ts で指定したスキーマファイルまたは GraphQL API (バックエンド) に基づいて型が生成されます。

try🐶everything myproject$ yarn run compile
yarn run v1.22.19
$ graphql-codegen
✔ Parse Configuration
✔ Generate outputs
✨  Done in 0.82s.
try🐶everything myproject$

// 実行結果

try🐶everything myproject$ tree src/__generated__ 
src/__generated__
├── fragment-masking.ts
├── gql.ts
├── graphql.ts
└── index.ts

0 directories, 4 files
try🐶everything myproject$

React フックで使用する

GraphQL コードジェネレーターは、( src/__generated__/gql.ts ファイルから ) gql 関数を自動的に作成します。この関数を使用すると、React フックに入る変数と、それらのフックからの結果を入力できます。

useQuery

gql 関数を使用してクエリを定義します。これにより、useQuery フックの型が自動的に生成されます。

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

export const GET_USERS = gql`
  query UserQuery {
    users {
      name
    }
  }
`;
...

// ⭕️ After
import {useQuery} from '@apollo/client';
import {gql} from 'apollo/__generated__/gql';

export const GET_USERS = gql(`
     query UserQuery {
     users {
       name
     }
   }
  `);
...

GET_USERS にマウスオーバーすると、
const GET_USERS: TypedDocumentNode<UserQueryQuery, Exact<{[key: string]: never;}>>
のようにクエリのタイプが表示されることを確認できたら OK です。

src/__generated__/gql.ts を修正すると誤動作することがあります。

useMutation

useQuery フックを入力するのと同じ方法で useMutation フックを入力できます。生成された gql 関数を使用して GraphQL ミューテーションを定義すると、ミューテーションの変数を入力してデータが返されるようになります。

まとめ

シンプルに適用でき、すぐ使えます！

yarn run compile をよく使いますが、参考事項として ⬇︎ も残します。

※ 参考：`yarn run watch` を実行する

yarn run watch を実行するには @parcel/watcher パッケージを追加する必要があります。
GraphQL スキマの変化をリアルタイムでモニタリングし新しいファイルを生成してくれます。

try🐶everything myproject$ yarn add @parcel/watcher
try🐶everything myproject$ yarn run watch          
yarn run v1.22.19
$ graphql-codegen -w
✔ Parse Configuration
✔ Generate outputs
  ℹ Watching for changes in /Users/username/myproject...