graphql-codegenとは？
GraphQLのデータ型を自動生成するパッケージです。
インストール
|
1 |
yarn graphql-codegen init |
What type of application are you building?
使っているフレームワークを選択します。もしReactであれば「Application built with React」を選択します。
Where is your schema?
graphQLサーバーのURLパス（エンドポイント）を指定します。
Where are your operations and fragments?
プロジェクトの中に定義されているクエリの内容を解析して自動で変換してくれるのでプロジェクト内のクエリの場所を指定します。（例：queries/**/*.ts)
Where to write the output
変換後ファイルの出力先を指定します。
Do you want to generate an introspection file?
「introspection fileを作りますか？」と言われているので基本これはNoで問題ないでしょう。
How to name the config file?
codegenの設定ファイル名をどうするか聞かれています。基本何でも良いですが、わかりやすいように「codegen.yml」などにしておくと良いでしょう。
What script in package.json should run the codegen?
自動生成を実行するコマンドの名前です。「gen-types」などと指定すると良いでしょう。
生成する設定ファイル
|
1 2 3 4 5 6 7 8 9 |
overwrite: true schema: 'https://key-horse-81.hasura.app/v1/graphql' documents: 'queries/**/*.ts' generates: types/generated/graphql.tsx: plugins: - 'typescript' - 'typescript-operations' - 'typescript-react-apollo' |
package.json
上記設定の場合は以下のバージョン付近でないと動作しないので注意です。（最新版とかだと複数ファイルに分かれて変換されてしまい期待した動作にならなくなります。）
|
1 2 3 4 5 6 7 8 9 |
"dependencies": { "graphql": "^15.5.0", }, "devDependencies": { "@graphql-codegen/cli": "1.21.3", "@graphql-codegen/typescript": "^1.21.1", "@graphql-codegen/typescript-operations": "1.17.15", "@graphql-codegen/typescript-react-apollo": "2.2.3", } |
最終的にプラグインのインストール
|
1 |
yarn |
クエリの定義
以下のようにクエリを定義します。
|
1 2 3 4 5 6 7 8 9 10 11 |
import { gql } from '@apollo/client' export const GET_USERS = gql` query GetUsers { users(order_by: { created_at: desc }) { id name created_at } } ` |
変換の実行
|
1 |
yarn gen-types |
注意点
- 上で決めたコマンド名をそのまま使っているだけなので「gen-types」は任意のコマンド名になります。
- 同じクエリ名があるとエラーになるので一意のクエリ名にすると良いです。
自動生成後のファイル
|
1 |
types/generated/graphql.tsx |
上記に自動生成されたデータ型が全て格納されます。プロジェクトから必要な型をインポートして使っていきます。
生成されたファイルの仕組み
|
1 2 3 4 5 6 7 |
export type GetUsersQuery = ( { __typename?: 'query_root' } & { users: Array<( { __typename?: 'users' } & Pick<Users, 'id' | 'name' | 'created_at'> )> } ); |
クエリの命名規則
「{定義したクエリ名}Query」という型が自動生成されます。
__typename
Hasura上の対象のフィールドの名前が来る。クエリがルートに定義されている場合は「query_root」、それ以外のテーブル名とかの場合は「users」などと表示されます。
Pick
実際に取得するデータやカラム名などはここに入ります。
この記事へのコメントはありません。