graphql-codegenでハマった話

はじめに

今回graphql-codegenを初めて使っていて、沼にハマった点の紹介になります。

結論（原因）

graphql-codegen --watch --config codegen.ts

上記のウォッチ・モードでcodegenを実行しながら、設定ファイル（codegen.ts）を編集していたために、予期しない階層にフォルダが自動生成されていたことが原因で、それ以降の生成に失敗していました。

https://the-guild.dev/graphql/codegen/docs/guides/graphql-server-apollo-yoga-with-server-preset#3-configure-codegen-config

事の発端

公式ページに通りに設定している筈なのに、突然生成が失敗するようになりました。エラーを見ても自動生成されたコード内でエラーが出ているため、直接的な原因がイマイチ分からず、また自動生成の元となるコード部分も変更した記憶がありませんでした。そこでgitの変更差分を確認してみたところ、全く予期しない位置にリゾルバーフォルダが自動生成されていることに気がつきました。

反省

ウォッチ・モードでcodegenを実行しながら、以下のようにgeneratesのパスの編集中にファイル保存したために、予期しない位置にフォルダが自動生成されていました。今後は、構築段階の設定ファイル編集中はウォッチ・モードを避けたいと思います。

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli'
import { defineConfig } from '@eddeee888/gcg-typescript-resolver-files'
 
const config: CodegenConfig = {
  schema: '**/schema.graphql',
  generates: {
    'src/...': defineConfig() //中途半端なパスのまま無意識に保存してしまうと、予期しない位置に生成されてしまう
  }
}
export default config