この記事は何か？
フロントエンドとバックエンドをGraphQL APIで連携する場合、スキーマファイル(schema.graphqls)をどうやって連携するか悩んでいました。
色々と試行錯誤して、ベストプラクティスとまでは言えないまでもベタープラクティスに近い解決策に至ったので共有してみます。
構成
バックエンドは Go, Gin, gplgen、
フロントエンドは TypeScript, React, Next.js
のSPA構成でそれぞれ別リポジトリで管理しています。
やりたいこと
バックエンドとフロントエンドでschema.graphqlsファイルから型を自動生成したい。
※ schema.graphqlsファイルの管理はバックエンドが主導で行う前提です。
やりたくないこと
graphqlsファイルの二重管理。バックエンドの差分を逐一フロントエンドでコピーして追従、というケースだけは避けたい。
辿り着いたベタープラクティス
バックエンドでは、gplgenのコマンドによりGoの型を自動生成し、
フロントエンドでは、GraphQL Code Generator(以下、codegen) でTypeScriptの型を自動生成する。
schema.graphqlsファイルをバックエンドのサーバにホスティングし、codegenの参照先(codegen.yml - schema)として設定する。
悩んだポイント
バックエンドでは、graphqlsファイルを分割して管理したい。一本で管理すると、システムが巨大化したときにコンフリクトが起きやすくなる、かつ見通しも悪くなるため。
一方で、codegenのスキーマファイルの参照先は当たり前だが1つにしたい。
具体的な解決策
バックエンドのデプロイパイプラインにて、catコマンドにより分割管理されたgraphqlsファイルを統合し、ホスティング用のディレクトリに出力するようにしました。
catコマンドでは以下のように拡張子を絞ってファイルを統合できるので大変便利です。
cat *.graphqls > public/schema.graphqls
これにより、バックエンドがデプロイするたびに最新のgraphqlsファイル群がshecma.graphqlsファイルに統合されホスティング、
フロントエンドでは、ホスティング先のURLをcodegenの参照先に指定することで、完全にスキーマファイルを同期することに成功しました。
※ ホスティング先にはbasic認証をかけるなどして公には見えないようにしましょう。
あくまでベタープラクティスなので、もっと楽にできる方法があればご教示お願いします！