複数のリポジトリにまたがるGraphSQLスキーマからTypeScript型を連続的に生成する🚀

GraphQL Code Generator ( graphql-codegen ) サーバー側でのGraphSQLとクライアント側の型スクリプトを使用するときに非常に便利です.GraphSQLとTypeScriptを使用する場合は、あなたのGraphSQLスキーマに基づいて型スクリプトを宣言します.1つずつタイプスクリプトを書く代わりに.graphql-codegen スキーマに1 : 1のGraphSQLスキーマから型宣言を生成します.
ただし、最新のGraphSQLスキーマから型宣言を生成する問題がありますgraphql-codegen ときに別のgithubリポジトリでAPIとクライアントアプリケーションを開発する.どのように解決すべきか

の基本的な使い方

以下に最小限の例を示します:

schema: schema.graphql
generates:
  ./src/graphql-schema.ts:
    plugins:
      - typescript

schema フィールドは1を参照します.*.graphql またはJSON形式、3 )リモート*.graphql githubリポジトリ内のファイルなど.
参照GraphQL Code Generator's documentation 詳細は

前提条件

次のセクションに進む前に、次のようにします.

1 . GraphSQLプロジェクトとそれに対応するGithubリポジトリ

私と一緒にレールアプリケーションですgraphql-ruby 宝石は、アプリの名前cont-codegen-sandbox-api .

typescriptとその対応するgithubリポジトリで作られたアプリケーション

私はcont-codegen-sandbox-client .

Graphicsスキーマジェネレータ

GraphSQLスキーマファイルを生成するスクリプトschema.graphql サーバ側で.使っているlib/graphql/rake_task.rb ( rake graphql:schema:idl ) これは.
Git pre commit hookまたはgithubアプリケーションを使用して、このファイル生成を自動化することをお勧めします.

Github個人アクセストークン

あなたのGitHub個人アクセストークンをあなたの倉庫の秘密にセットしてください.私の場合、秘密の名前はPERSONAL_ACCESS_TOKEN .
トークンはスコープにアクセスする必要がありますrepo .
graphql-codegen また、GithubアクションはREPOがプライベートかどうかトークンを使用します.

repos全体のタイピングを生成する

GraphSQLプロジェクトとクライアントアプリケーションが同じディレクトリまたは同じGITUBリポジトリにある場合、上記の基本的な例は十分です.一方、アプリケーションが異なるリポジトリで管理されている場合は、どうすればよいでしょうか?
その場合、リモートを指定できますschema.graphql githubリポジトリ(プライベートリポジトリを含む)で✨). codegen.yml 構文に従う必要があります.

schema:
  - user/repo#branchName:path/to/schema.graphql:
      token: ${PERSONAL_ACCESS_TOKEN}

token フィールドは常に必要ですgraphql-codegen あなたのリポジトリにアクセスできます.あなたのレポでさえ、公である必要がありますtoken 現在は2021年1月.これがバグかどうか知りません.
dotenvを使っているなら、codegenコマンドはgraphql-codegen -r dotenv/config .
こちらがcodegen.yml :

schema:
  - github:ayumitamai97/cont-codegen-sandbox-api#main:schema.graphql:
      token: ${PERSONAL_ACCESS_TOKEN}

generates:
  ./types/graphql-schema.ts:
    plugins:
      - typescript
    config:
      apolloClientVersion: 2

今、私たちは打つことによってタイプスクリプトのために型の縮小を生成することができますyarn graphql-codegen -r dotenv/config 🔥

REPOSを通して連続的に生成を生成する

前の節ではセットアップ方法を説明しますgraphql-codegen 別のリポジトリでGraphSQLとTypesScriptプロジェクトを持つ場合.では、どのようにこのプロセスを自動化できるのでしょうか?
Githubアクションはそれを行う最良の方法かもしれません.3つのGithubワークフローを作成する必要があります.

GraphSQLスキーマが更新された際にクライアント側のrepoに通知します.

実行するgraphql-codegen とプルリクエスト(クライアント側レポ)を作成する

automerge pull request (クライアント側のレポ) (オプション)

1 . GraphSQLスキーマの更新時にクライアント側のレポを通知する

GraphSQLのスキーマからほとんど同期してtypescriptタイピングを生成するには、サーバー側のRIPOは、GraphSQLスキーマが更新されるときにクライアント側のレポに通知しなければなりません.
以下の設定でrepoがトリガされますrepository_dispatch コミットが押されるとき、他のrepoのイベントmain 枝schema.graphql はファイルdiffである.
警告!第三段階Dispatch update-graphql-schema ) あなたの個人的なアクセストークン GITHUB_TOKEN cannot trigger repository_dispatch event .
マイ.github/workflows/dispatch_graphql_schema_update.yml サーバサイドレポで

name: Dispatch GraphQL Schema Update

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: technote-space/[email protected]
        with:
          PATTERNS: schema.graphql

      - name: Dispatch update-graphql-schema
        uses: peter-evans/repository-dispatch@v1
        with:
          repository: ayumitamai97/cont-codegen-sandbox-client
          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
          event-type: update-graphql-schema
        if: env.GIT_DIFF

2 . GraphSQL CodeGenを実行し、プルリクエストを作成する

時repository_dispatch イベントは、クライアント側のレポでトリガされ、我々はしたいgraphql-codegen 最新のGraphSQLスキーマに基づいて型スクリプトを生成します.
プル要求が作成されるとき、1つはチェックして、PRを承認したいです、一方、もう一つは、自動的に合併されることを望みます.私は後者の考えが好きですpascalgn/automerge-action .
警告!第四段階Create Pull Request ) 必要PERSONAL_ACCESS_TOKEN あなたがプル要求をautomergeしたいならば.そうでなければ、GITHUB_TOKEN 十分です.
マイ.github/workflows/graphql_schema_updated.yml クライアント側レポについて:

name: Update GraphQL Schema

on:
  repository_dispatch:
    types: [update-graphql-schema]

jobs:
  update-graphql-schema:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: Install dependencies
        run: yarn install

      - name: Update GraphQL Schema
        run: PERSONAL_ACCESS_TOKEN=${{ secrets.PERSONAL_ACCESS_TOKEN }} yarn codegen

      - name: Create Pull Request
        uses: peter-evans/create-pull-request@v3
        with:
          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} # `GITHUB_TOKEN` unless using automerge-action
          commit-message: '[bot] Update GraphQL Schema'
          committer: GitHub <[email protected]>
          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
          signoff: false
          branch: feature/update-graphql-schema
          branch-suffix: timestamp
          delete-branch: true
          title: '[bot] Update GraphQL Schema'
          body: GraphQL schema has been updated
          labels: automerge # required if using automerge-action

automerge pull request (オプション)

あなたがgithubワークフローでつくられるautomergateであるプル要求を望むならば. pascalgn/automerge-action 参考です.このGithubアクションは、自動的にPRをマージしますautomerge レーベル.
番目のワークフローが新しいプルリクエストを作成し、automerge それへのラベル、PRがラベルされるとき、3番目(この)ワークフローは引き起こされなければなりません.
マイ.github/workflows/automerge.yml クライアント側レポについて:

name: Automerge
on:
  pull_request:
    types:
      - labeled

jobs:
  automerge:
    runs-on: ubuntu-latest
    steps:
      - name: automerge
        uses: pascalgn/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

実施例

最後に、あなたのGraphSQLプロジェクトは、リポジトリを横切ってGraphSQLスキーマから型スクリプトを生成することができます!🚀
上記のすべてをうまく構成した場合、ワークフローはこのようになります.

私のCodegenとワークフロー構成へのリンク

graphql-codegen config

Notify client-side repo when GraphQL schema is updated

Execute graphql-codegen and create Pull Request

Automerge Pull Request

例のプル要求へのリンク

ここでワークフローで作成された実際のプル要求を見ることができますayumitamai97/cont-codegen-sandbox-client#36 .
使用する場合に注意してくださいGITHUB_TOKEN for Create Pull Request ステップ、コミッタはあなたのアカウントの代わりに“githubアクション(ボット)”になります.
このポストが役に立つならば、あるいは、あなたはこれらのことをするより良い方法を知っています.読んでくれてありがとう!👾
日本語版GraphQL スキーマの変更を検知し、TypeScript の型定義を自動的に生成する仕組み | Medium