GraphQL Code Generatorとは、GraphQLのスキーマからTypeScriptの型定義ファイルを作成することができるツール。
テスト環境はNext.js + TypeScript + Apollo + GraphQL Code Generator + Hasuraの構成する。CSRでGraphQLリクエストはせず、SSRとSSG内でのみGraphQLリクエストを行う前提。
余計なプラグインは入れずに、最低限の設定でGraphQLへqueryとmutationを使用できる設定にする。
インストール
$ npm i -D graphql @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-document-nodes
参考: https://www.graphql-code-generator.com/docs/plugins/index
@graphql
=> (必須) GraphQLパッケージ（そもそもこれがないと動かない)
@graphql-codegen/cli
=> (必須) 本体 (型定義ファイルジェネレーター本体)
@graphql-codegen/typescript
=> (必須) TypeScriptの型定義ファイルを生成するのに必要
@graphql-codegen/typescript-operations
=> (必須) ユーザ定義したquery, mutation, subscription, fragmentの型定義ファイル生成
@graphql-codegen/typescript-document-nodes
=> (.graphql)ファイルから(.ts)ファイルを生成し、型定義ファイルに追加してくれる。
導入することで、以下のメリットがある
1) ApolloClientので呼び出すときに、逐一「gql'...'」をつけなくて良い。
2) 型定義ファイルにquery, mutation, subscription, fragmentが追加されるので、importが減りわかりやすい。
@graphql-codegen/fragment-matcher
=> GraphQLのinterfaceやunion(TypeScriptのinterfaceのことではない)を使用している場合に必要。使用する場合InMemoryCacheの引数を設定する必要あり？
@see: https://qiita.com/daiki7nohe/items/8a3d79d0bebf2166f32d
@graphql-codegen/typescript-graphql-files-modules
d.tsファイルを生成してくれる。パッケージ作成時に必要らしいが、パッケージを作成しないなら不要という認識
@graphql-codegen/typescript-react-apollo
=> useQueryのように使える独自ReactHooksを生成！内部でuseQueryやuseMutationを使用している。
@see: https://qiita.com/pure-adachi/items/f1e03941e8c0ac47c7ee
@see: https://developer.medley.jp/entry/2020/11/06/180208
@graphql-codegen/typescript-graphql-request
=> Apollo使わないでGraphQLリクエストするときは導入を考える。
備考: graphqlと@graphql-codegen/cliは、グローバルにインストールすることは非推奨にされている。
Installation
設定
codegen.yml内で環境変数を読み込む方法
Hasuraのエンドポイントとか、HASURA_GRAPHQL_ADMIN_SECRETなんかは、環境変数から読み込ませたい。そんなときは"-r dotenv/config"のオプションをつけて生成すればOK．
"scripts": { ... "codegen": "graphql-codegen -r dotenv/config" ... }
ただしデフォルトだと.envからしか読み込まないので、.env.localなど他の環境変数ファイルから読み込ませたいときは以下のようにする。
"scripts": { ... "codegen": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config" ... }
[参考]
codegen.yml
Support multiple .env files. · Issue #4635 · dotansimha/graphql-code-generator · GitHub
=====================================
