graphql-request/dist/types.domのエラー解決【GraphQL Code Generator】

GraphQL Code Generator(graphql-codegen)で生成したコードに、『import { RequestInit } from ‘graphql-request/dist/types.dom’』が含まれて『モジュール ‘graphql-request/dist/types.dom’ またはそれに対応する型宣言が見つかりません。』と赤線が出たときの対処法です。

解決方法

とりあえずの解決方法

生成されたコードから、エラーが出る行を消すだけで大丈夫です。

//次の行を消す
import { RequestInit } from 'graphql-request/dist/types.dom';

しかし、codegenを実行してコードを生成する度にこのコードを消すのは面倒です。そこで次のようなLifecycle Hooksをcodegenの設定ファイルに記述します。

自動で該当行を消す方法

あくまで解決策の一例ですが、codegenの設定ファイル(codegen.tsだったりcodegen.ymlだったり)にLifecycle Hooksを設定します。

Lifecycle Hooksとはその名の通り、codegenの実行されるライフサイクルに合わせて任意のスクリプトを実行できる機能です。詳しくは、公式ドキュメントをご覧ください。

GraphQL Code Generator

 

https://the-guild.dev/graphql/codegen/docs/config-reference/lifecycle-hooks

Lifecycle Hooks – GraphQL Code Generator

Learn how to use the GraphQL Code Generator CLI to generate code from your GraphQL schema and operations.

つまり、hooksに『import { RequestInit } from ‘graphql-request/dist/types.dom’』を含む行を消すスクリプトを書けば、自動的にエラーの出る行が消えます。hooksの具体的なコード例を掲載します。(あくまでも一例です)

const codegenConfig: CodegenConfig = {
  // ....
  hooks: {
    beforeDone: [
      `find ./src/graphql/generated -name "*.ts" -exec sed -i '' '/graphql-request\\/dist\\/types\\.dom/d' {} \\;`,
    ],
  },
}

設定ファイルをTypeScript(codegen.ts)で書いているのでTypeScriptコードになっていますが、YAML形式で設定ファイルを書いている方は適宜記述を変えてください。

念のため補足しますが、このコマンドはUnix(Linux)コマンドなので、Unixコマンドが実行できる環境(MacやWSLやLinux)であること、及び、findコマンドで検索しているディレクトリ階層およびファイルは個々人によって違うので、適宜書き換えてください。

以上で解決しますが、このエラーについて軽く補足します。

補足

このエラーはgraphql-requestのバージョン5.2.0以降を利用していると発生するようです。この記事を書いている現在の最新バージョン(TypeScript 5.0.4、graphql-request 6.0.0)では、RequestInitという型はTypeSciprのグローバルで定義しているので、importしないでも使えるようになっています。