GraphSQL終点に基づいたタイプスクリプトタイプと反応フックの生成

_{^{Cover image by Fred Jesus}}
今日では、typescriptを使ってreactjsを開発することは、アプリケーションを書くためのしっかりした方法を与えます.これは、タイプコードの利点、コンポーネントの自動ドキュメント化、エラー処理、およびエディタコードでの正確な自動補完の利点を追加します.しかし、まだ、型を書くためにかなりの努力を必要とします.また、データプロバイダがGraphSQLサーバーである場合、サーバーには無駄な仕事をしているように感じます.冗長な、右のようですか?
これを念頭に置いて、GraphQL Code Generatorは、GraphSQLスキーマからタイピングスクリプトを生成する能力を与えてくれます.それを超えて、それは私たちにあなたのアプリケーションに収まるようにメンテナンスや回避策のあらゆる種類を必要としないカスタム反応フックを作成するためのいくつかのプラグインを提供します.
他の多くの中で、このツールを使用する利点のいくつか

すべてのGraphSQLのエンドポイントのインターフェイス/タイプを作成することを忘れてください時間を節約し、何を問題に費やす;

開発経験:常に利用可能な型を持つ結果として、エディタは意味のある自動補完とエラーチェックを提供します

あなたのGraphSQL Edpointスキーマが変化するならば、あなたのアプリケーションは更新されます、そして、タイプスクリプトはあなたが必要な変更をするのを手伝うのを助けます.

セットアップ

まず、必要な依存関係をインストールしましょう.

npm i @apollo/react-hooks graphql

npm i @graphql-codegen/cli @graphql-codegen/import-types-preset @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --save-dev

私は、以下のフォルダ構造を考慮していますが、もちろん、あなたの好みに適応してください、コードジェネレータによって取り出されるスキーマを格納する場所が必要であることに留意してください

📦 my-project
┣ 📂 src
┃ ┣ 📂 pages
┃ ┃ ┗ index.tsx
┃ ┣ 📂 queries
┃ ┃ ┣ 📂 autogenerate
┃ ┃ ┗ my-query.gql
┃ ┗ apollo-client.ts
┣ codegen.yml
┗ package.json

次に、基本的には、CodeGenという名前のプロジェクトのルートに設定ファイルを作成する必要があります.京大理以下のスニペットは通常、自分の目的のために異なるファイルを生成する、つまり、GraphSQLオペレーションやサーバスキーマのような問題によって分割されたプロジェクトで、通常設定した方法を示します.

# Endpoint API, the following URL is a example
schema: https://countries-274616.ew.r.appspot.com/graphql/
overwrite: true
# Format files
hooks:
  afterAllFileWrite:
    - prettier --write
generates:
  # Get schemas from server
  src/queries/autogenerate/schemas.tsx:
    documents: 'src/queries/**/**.gql'
    plugins:
      - typescript
  # Create operations based on queries
  src/queries/autogenerate/operations.tsx:
    documents: 'src/queries/**/**.gql'
    preset: import-types
    presetConfig:
      typesPath: ./schemas
    plugins:
      - typescript-operations
  # 1. Export GraphQL documents
  # 2. React interface
  src/queries/autogenerate/hooks.tsx:
    documents: 'src/queries/**/**.gql'
    preset: import-types
    presetConfig:
      typesPath: ./operations
    plugins:
      - typescript-react-apollo
    config:
      # Optionals
      withHOC: false
      withComponent: false
      withHooks: true

また、スキーマを生成するためにスクリプトを追加し、パッケージでファイルを変更するのを見ましょう.JSON :

"scripts": {
  ...
  "schemas": "graphql-codegen --config codegen.yml",
  "schemas:watch": "npm run schemas -- --watch",
},

エディタのコードでは次のようになります.

これは、多くのプラグイン、プリセット、統合、および構成を持っているので、それを使用する可能な方法のうちの1つだけです.hereのドキュメントをチェックアウトしてください.
私は上記のコードで利用可能なリポジトリを作りました.
もともとcheck it out here