タイプセーフなGraphSQLクライアントのためのGraphSQLコードジェネレータの使用

Want to know more about advanced GraphQL implementations? Have a look at my book Fullstack GraphQL.

Roy Derks

This week my new book Fullstack GraphQL (co-authored with Gaetano Checinski) was released. Get it here newline.co/fullstack-grap…

08:56 AM - 16 Oct 2020

これは非常に強力です.なぜですか.基本的には、GraphSQLの種類と操作にマッチするタイプスクリプトタイプを持つことができます.重要なニュアンスは、typescriptが型の集合を持っており、graphqlに一連の型があることです.それは少し理解するのにかかるかもしれませんが、これらは異なっています.何が正確に我々はこの記事で発見するものです!

グラフィカルなAPI

Graphqlから型スクリプトの定義とコードを生成するには、まずスキーマを必要とします.このためには、Rick and Morty API それは公的に利用可能であり、人気のテレビ番組に基づいています.
RICEとMorty APIのGraphSQL Playgroundを開くと、クエリや突然変異のような複数の操作を使用できます.
エクスプローラーで以下のクエリを貼り付けて試してみましょう.

{
  characters {
    results {
      name
      gender
    }
  }
}

これにより、JSONレスポンスは結果として表示されるname and gender .
すごい!リックとモティAPIを使用して開始点として我々は今、これを使用することができますtypescriptと自動生成いくつかのコードです.

アプリケーションからGraphSQLを要求する

GraphSQL APIからこのデータをアプリケーションに取得するには、クエリを使用してデータを取得する必要があります.このためには、通常のHTTPリクエストや、一般的なGraphSQLクライアントのいずれかを使用できます.
この例ではライブラリを使用しています[graphql-request](https://github.com/prisma-labs/graphql-request) それは非常に軽量であり、コードのいくつかの行が必要です.NPMからインストールしたら、以下のようにリックとmory APIからデータを取得できます.

import { request, gql } from 'graphql-request';

const query = gql`
  {
    characters {
      results {
        name
        gender
      }
    }
  }
`;

request('https://rickandmortyapi.com/graphql/', query).then((data) =>
  console.log(data),
);

しかし、APIから受け取るデータには、typescriptで使用できる型定義はありません.手動で追加する代わりに、ライブラリのGraphSQLコードジェネレータを使用できます.

グラフィカルジェネレータ

TypeScript型の定義とコードを生成するには、GraphSQLコード生成ツールを使用すると、任意のGraphSQLスキーマから型スクリプトを生成するCLIツールです.
GraphSQLスキーマから生成されたTypeScriptコードを使用して、Github情報を取得するアプリケーションを作成します.GraphSQLコードジェネレータをインストールするにはnpm または、しかし、最初に追加する必要がありますgraphql 依存関係として.

npm i graphql  

And @graphql-codegen/cli また、関連するプラグインもdev依存性です.

npm i --save-dev @graphql-codegen/cli @graphql-codegen/typescript

ここで、GraphSQL APIから型定義を生成するために必要なすべてをインストールしました.
しかし、GraphSQLコードジェネレータを使用するには、設定ファイルを追加する必要がありますcodegen.yaml これは、GraphSQL APIへのURLと、使用するプラグインを指定します.

# codegen.yaml
schema: https://rickandmortyapi.com/graphql/
generates:
  ./src/types.ts:
    plugins:
      - typescript

設定ファイルを追加した後にgraphql-codegen コマンドラインから、構成ファイルと同じディレクトリに追加されました.これで新しいtypes.ts リックとmorty APIのスキーマに基づくすべてのtypescriptタイプ定義を含んでいるファイル.
つまり、graphql-request . クエリで、あなたは、Characters :

import { request, gql } from 'graphql-request';
import { Characters } from './types';

const query = gql<code>
  {
    characters {
      results {
        name
        gender
      }
    }
  }
</code>;

request('https://rickandmortyapi.com/graphql/', query).then((data: { characters: Characters }) =>
  console.log(data),
);

かなり簡単!もちろん、多くの機能GraphSQLのコードジェネレータを使用することができます.インザブックFullstack GraphQL GraphSQLスキーマからGraphSQLクライアントコードを生成するためのガイドを含む、より多くの作業例を見つけることができます.