Blog

GraphQL Code GeneratorでGraphQlのschemaからTypescriptの型定義を生成する方法

GraphQL Code Generatorとは

GraphQLでAPIを作る際に、バックエンド側では、GraphQLのschemaとresolverを書くことになります。
もし、Typescriptでresolverのコードを書いていた場合、型定義の内容が、schemaで書いた内容と似通っていて、二度手間になっているように思えてきます。
また、schemaと型定義でのデータ型に不整合があると、エラーの原因になります。
GraphQL Code Generatorは、この問題を解消できる便利なnodejsライブラリです。
この使い方を単純なサンプルと併せて紹介します。

使用するschemaとresolverの例

schemaの例として以下のようなユーザー一覧を出すものを考えてみます。
src/typedefs/users.gqlファイルには、

これに対応するresolverとして、src/resolvers/users.tsファイルに以下のようにします。

このように、schemaとresolverを定義する例を考えます。
上記の例で、もしeslintなどを有効にしていると、argsに型付されていないというエラーが表示されるはずです。

手作業で型定義するとどうなるか

上記のエラーを解消するために、listUsersArgsような型定義を導入すると、以下のようになります。

同様にして、戻り値などへの型定義も追記していくことになります。
ここで、listUsersArgsoffsetlimitのデータ型は、schemaのlistUsers(offset: Int, limit: Int): [User]という部分を見れば、明確な対応関係にあるとわかります。
そのため、listUsersArgsのような型定義をわざわざ書くのはバグの温床です。

GraphQL Code Generatorのインストールと設定

GraphQL Code Generatorを使うには、CLIツールと、必要に応じた各種プラグインのインストールが必要になります。
今回のようにTypescriptでのresolverの型定義を生成する場合は、以下のライブラリのインストールで十分です。

続いて、GraphQL Code Generatorの設定ファイル用意します。codegen.ymlファイルに以下のように書きます。

これで、src/typedefs/*gqlで指定されたパスのschemaファイルを読みとって、自動生成した型定義をsrc/generated/graphql.tsに書き出します。

GraphQL Code Generatorの実行結果

設定を済ませてから、npm run graphql-codegenとすると、graphql.tsが生成されます。
その内容の一部を抜粋すると、以下のようになります。

これをそのまま、importして、resolverの型付けに使用すると、以下のようになります。

eslintの”型付されていない”というエラーも解消されていることがわかります。
このように、resolverの型が作られていて、自分で定義する必要がなくなりました。

まとめ

graphQLのshemaからTypescript用の型定義を自動生成するGraphQL Code Generatorの使い方を紹介しました。
graphQLでAPI開発をしていて、作業効率を上げたい方におすすめです。

Author Profile

越境ECの最新情報

越境EC関連の記事

月から探す

ページTOPへ