アプリケーションが成長すると、 Typed システムはバグを早期に発見し、全体的な開発エクスペリエンスを向上させるために不可欠なツールになる可能性があります。
GraphQL は Typed システムを使用して、GraphQL スキーマ内の各型とフィールドで利用可能なデータを明確に定義します。 GraphQL サーバーのスキーマは厳密に型指定されているため、GraphQL コード ジェネレーターなどのツールを使用して TypeScript 定義を自動的に生成できます。 生成された型を使用して、GraphQL 操作の入力と結果の型安全性を確保します。
以下では、フックとコンポーネントのタイプを生成するための GraphQL コード ジェネレーターのインストールと構成について説明します。
プロジェクトを設定する
開発環境の設定を完了して置く必要があります。(関連記事：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...
コメント