はじめに

GraphQL+Rails+Reactという技術スタックの入門をした際、こちらの記事がとてもわかりやすかったです。その中で、GraphQLCodeGeneratorの設定ファイルcodegen.ymlについて、特に解説がなかったので学習のために調べてみました。

公式はこちら https://the-guild.dev/graphql/codegen

記事について

graphql-ruby初学者向けの記事を書いています。

codegen.yml

todoアプリを作った時の設定ファイルがこちら

overwrite: true
schema: "http://localhost:3000/graphql"
documents: "./app/javascript/graphql/**/*.ts"
generates:
  app/javascript/graphql/generated.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

順番に解説していきます。こちらがcodegen.ymlのオプションに関する内容はこちらに記載してます。 https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config

overwrite

ファイルがすでに存在していた場合に上書きします。(デフォルトはtrue)

schema

GraphQLエンドポイントのURLを記述しています。例えばこんな感じです。schema: "http://localhost:3000/graphql" これをコードファーストと言います。その他にはスキーマファイルを指定する方法です。指定方法はいくつかありますが、詳細は公式を。 https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field#available-formats これをスキーマファーストと言います。どちらを採用すべきかというところで、個人的な感想でいうと、可能であればコードファーストです。特に個人開発レベルであれば小規模ですし、スキーマファイルのメンテナンスコストも省略され、スキーマとコードの乖離が発生する可能性も無いことからコードファースト一択という感想です。しかし、大規模なサービスとなってくる場合、通信するGraphQLサーバーが複数ある可能性もあるので、コードファーストで実装していくのが困難となってくる場合もあるかと思います。そういった場合はスキーマファーストを選択せざるを得ないのかなと思いました。

documents

こちらにquery等を記述したファイルの格納先をパスで指定します。 "./app/javascript/graphql/**/*.ts"としてtsファイルで指定していますが、それ以外もサポートされています。

watch

booleanで記述し、デフォルトはfalseです。 watch: trueと記述してターミナルでyarn codegenを実行すると監視モードになります。 documentsで指定したファイルが変更されると自動的にgeneratesで指定したgenerated.tsを編集してくれます。

plugins

typescript typescript-operationsとセットで使用し、generated.ts内で型を自動生成してくれてます。。
typescript-operations typescriptとセットで使用し、generated.ts内で型を自動生成してくれてます。
typescript-react-apollo 実際に使うuse○○○○○Mutation,use○○○○○Queryのメソッドを定義してくれます。 typescript,typescript-operationsによって定義された型を使用しているので、同じくセットで使用する必要があります。

会社の紹介

株式会社 mofmof では一緒に働いてくれるエンジニアを募集しています。興味のある方は是非こちらのページよりお越しください！ https://www.mof-mof.co.jp/ https://www.mof-mof.co.jp/recruit/

もふもふ技術部

IT技術系mofmofメディア

個人開発のcodegen.ymlの設定について考えてみた(GraphQL+Rails+React)