NxでGraphQL Code Generatorを使ってコード生成する

導入

モノレポやってますか？
モノレポといえばNxです。
モノレポといえばコード生成です。
しかし、Nx でコード生成しようとネット上で調べてみたのですが例をうまく見つけられませんでした。(検索力が足りないだけ？？？)
Generator を自作するドキュメントはあるのですが、API スキーマからコードを生成するというタスクには過剰な気がします。
そこで、この記事では GraphQL スキーマから TypeScript の型を生成する例を紹介しようと思います。

GraphQL からのコード生成にはGraphQL Code Generatorを使用します。

Nx のセットアップ

まずは nx で適当にワークスペースを作成します。
ここは自分が実際に作りたいプロジェクトに合わせて適切なプラグインを使用してください。

npx create-nx-workspace@latest my-project --preset=ts

スキーマと型を管理するライブラリを追加します。
TypeScript ライブラリのGeneratorを使用します。

npx nx generate @nrwl/js:library

プロンプトでいろいろ聞かれるので適当に入力します。
以下、GraphQL スキーマを生成するライブラリの名前はなんでもいいですが graphql-schema とします。

√ What name would you like to use for the library? · graphql-schema
√ Which unit test runner would you like to use? · none
√ Which bundler would you like to use to build the library? Choose 'none' to skip build setup. · tsc

ライブラリを作成するための準備は完了です。うまくいっていれば概ね以下のようなディレクトリ構造になっているはずです。

└─ my-project
    └─ packages
        └─ graphql-schema

コード生成のセットアップ

次に GraphQL Code Generator をセットアップしていきます。
まずは CLI アプリと、TypeScript の型を生成するプラグインをインストールします。

npm install graphql
npm install -D typescript
npm install -D @graphql-codegen/cli

次に TypeScript の型を生成するためのプラグインをインストールします。
プラグインには他にも多くのものがあるので、自分のユースケースに合ったものをインストールしてください。

npm install -D @graphql-codegen/typescript

コードを生成するための設定をしていきましょう。

スキーマファイルを graphql-schema/src/graphql/schema.graphql に作成します。
中身は公式サイトのサンプルから拝借して以下のようにしておきます。

schema.graphql

type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}

type Post {
  id: Int!
  title: String!
  author: Author
}

type Query {
  posts: [Post]
}

スキーマファイルを作成するための設定ファイルを graphql-schema/codegen.ts に作成します。

codegen.ts

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

const src = 'packages/graphql-schema/src';

const config: CodegenConfig = {
  schema: `${src}/graphql/**/*.graphql`,
  generates: {
    [`${src}/index.ts`]: {
      plugins: ['typescript'],
    },
  },
};
export default config;

graphql-schema/src/graphql/**/*.graphql を参照して、 graphql-schema/src/index.ts に型が生成されるように設定しています。

これでコード生成の準備ができました。
以下のコマンドを my-project 直下で実行することで graphql-schema/src/lib にコードが生成されます。

npx graphql-codegen --config packages/graphql-schema/codegen.ts

Nx へのタスクの追加

最後に Nx にコード生成を実行するためのタスクを追加します。

graphql-schema/project.json の targets に codegen というタスクを追加します。
タスクの定義には run-commandsを使用します。

{
  "targets": {
    "codegen": {
      "executor": "nx:run-commands",
      "options": {
        "command": "graphql-codegen --config packages/graphql-schema/codegen.ts"
      }
    }
  }
}

さらに build タスク の dependsOn プロパティに "codegen" を追加して、buildがcodegen に依存していることを明示します。

{
  "targets": {
    "build": {
      "dependsOn": ["codegen"]
    }
  }
}

これで以下のコマンドでコード生成が行われるようになりました。

npx nx codegen graphql-schema

また、build 時には codegen が事前に行われることも確認できます。

npx nx build graphql-schema

おわりに

案外調べるのに時間がかかったので、この記事を読んで助かる人がいれば嬉しいです。