[GraphQL Code Generator] より良い型を出力するために初期設定時に avoidOptionals を設定しよう

公式ドキュメントの手順通りに導入を進めると、avoidOptionals の設定が漏れてしまう場合がある

GraphQL を扱うプロジェクトでは、GraphQL Code Generator を扱っているケースが多いと思います。導入ガイドのドキュメント 通りに実装していけば、型や関数の出力をすることができます。

ただ、導入ガイドのドキュメント では目立ちにくいけれど、自社でフロントエンドもバックエンドも開発してスキーマ駆動開発で進める場合は、設定してしておいた方がいいオプションがあります。それが、avoidOptionals です。

導入ガイドのドキュメント のコードそのままで avoidOptionals を設定しなかったり、false に設定すると、生成された型が optional になります。

// avoidOptionals を設定しなかったり false にした場合
myField?: Maybe<string>

// avoidOptionals を true にした場合
myField: Maybe<string>

上記のコードだけ見ると大したことがないように見えますが、スキーマ次第では数百箇所以上の型定義に影響をすることもあります。

avoidOptions を設定することで、TypeScript の型が実態にあったものになる

TypeScript には null も undefined もありますが、GraphQL では null は存在しても、undefined は存在しません。そのためリクエストをして、値がない場合は null が帰ってくるケースしか考えられません。

もし、導入ガイドのドキュメント に書かれているとおりの設定で出力した型を使うと、フロント側で自作した型を null も undefined も許容するように調整しなければいけなくなったり、undefined にならないようにガードをする必要が出てきます。そのため、avoidOptionals は true に設定をしましょう。

import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript'],
      config: {
        // 追加
        avoidOptionals: true
      }
    }
  }
}
export default config

もしくは個別設定ができるので、必要なものに対して true を設定しましょう。

import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript'],
      config: {
        // 追加
        avoidOptionals: {
          field: true
          inputValue: true
          object: true
          defaultValue: true
        }
      }
    }
  }
}
export default config

これで、オプショナルが外れたコードが出力されます。

myField: Maybe<string>

個人的には、自社でフロントエンドもバックエンド開発をしているのであれば、全て true にしてoptional にならない形にして差し支えないのかなと思っています。

開発が進んできてから直そうとしても query を利用している箇所がたくさんあると、いろいろな箇所を修正する必要が出てくることが考えられますね。初期設定時に設定しておくと良さそうです。

ちなみに、ついでに他の config も設定しておいた方が良さそうですね。開発したいものによって取捨選択になってくると思うので、とりあえず 一覧のリンク だけ貼っておきます。