フラグメントを使用して、GraphSQLスキーマをクリーンアップする方法

もともと投稿StepZen
あなたが以前に複数のGraphSQL質問を書いたならば、あなたは、複製されたコードが速く構築するのを知っています.幸いにも、Graphicsのスペックは、あなたのコードをトリムするためにフラグメントを定義しており、Stezenはあなたが速度でそれを助けるためのツールを持っています!

Note: This tutorial assumes the prerequisite of basic GraphQL knowledge: types and queries. You can read up on them on the official specification site.

どのようなグラフの断片ですか？

あなたが尋ねたうれしい!基本的に、GraphSQLフラグメントは開発者がDon't Repeat Yourself 原理.
によるとthe official spec , グラフの断片は

"the primary unit of composition in GraphQL."

つまり、それらが元素である、原子であることを意味します.コードをさらに減らすことはできません.このため、重複するコードを削除することを意味します.
しかし、断片が理論にどんなものであるかを知っていること、そして実際にそれらを使用するもう一つのことです.割れましょう!
あなたが私と一緒にしたがっているならば、あなたは2、3のものを必要とします.

エーStepZen account 管理者とAPIキーにアクセスする.

との親近感The Cat API (キーにアクセスするには、フリーアカウントが必要です).

スキーマの例

この例のスキーマは、1つのフォルダの下にある3つのファイルです.

繁殖するグラフ

type Breed {
  temperament: String!
  origin: String!
  name: String
  life_span: String
  hairless: Int
  rare: Int
}

type Query {

  BreedById(id: String!): Breed
    @rest(
      endpoint: "https://api.thecatapi.com/v1/breeds/search?q=$id"
      configuration: "cat_config"
    )
  allBreeds: [Breed]
      @rest(
      endpoint: "https://api.thecatapi.com/v1/breeds"
      configuration: "cat_config"
    )
}

breed.graphql 我々の品種タイプと我々の2つの質問を定義します.BreedById and allBreeds . cat APIのエンドポイントからデータを取得します.@rest .

To learn more about @rest, check out our docs.

Aに気づくでしょうcat_config 問い合わせの名前configuration 仕様.
これは次のファイルで定義されている設定を参照します.

設定。ヤル

configurationset:
  - configuration:
      name: cat_config
      Authorization: Apikey {{YOUR_CAT_CONFIG_KEY_HERE}}

config.yaml 情報のステップは、cat APIに接続する必要が含まれます.
最後に、

インデックス.グラフ

schema @sdl(files: ["breed.graphql"]) {
  query: Query
}

スキーマエクスプローラーのオープン

Stezenには、Graphqlのクエリーエクスプローラがあります.Stezzenスキーマエクスプローラーではすべての種類のおいしい機能がありますが、今日、我々はフラグメントボタンに集中するつもりです.
エクスプローラを開くにはstepzen start コマンドラインから.前にStezenを使用したことがない場合は、実行する必要がありますstepzen login まず、あなたの資格情報を提供します.
ステップZenエクスプローラエクスプローラをブラウザで開きます!をクリックし、[すべての利用可能なフィールド]を選択します.ステップボタンの横にある矢印ボタンを押すと、結果を得るよ!

今、我々は両方のクエリのすべてのフィールドを要求しているので、我々は機会をフラグメントを使用する必要があります!
通常、あなたは戻って行かなければならないでしょうbreed.graphql のように書きます.

fragment breedFields on Breed {
  temperament
  origin
  name
  life_span
  hairless
  rare
}

...しかし、それはStezen禅エディタで必要ではない!
クエリ名の上にホバーする場合は、楕円を持つボタンを見ることができます.... ) その上に

をクリックして、あなたは、フラグメントがあなたのために、エクスプローラで右そこに生成されて参照してくださいよ!

今すぐあなたのすべてのフィールドを選択allBreeds と選択BreedFragment .
再度クエリを実行し、必要な正確な結果を得るよ!
フィールドの選択と選択によってフラグメントを編集することもできます.

これは、あなたのスキーマにフィールドを追加すると言うと、とても便利です.country_code , その後、それはすべてのあなたのフラグメントの定義だけではなく、ブラウザ内のすべての以前のクエリに追加するには、マウスのワンクリックです.
だからcountry_code :

type Breed {
  temperament: String!
  origin: String!
  name: String
  life_span: String
  hairless: Int
  rare: Int
  country_code: String
}

以下のようにして、各クエリにaltnamesを追加する必要はありません:

query MyQuery {
  BreedById(id: "abys") {
    temperament
    rare
    hairless
    life_span
    name
    origin
    country_code
  }
  allBreeds {
    temperament
    rare
    hairless
    life_span
    name
    origin
    country_code
  }
}

fragment BreedFragment on Breed {
  temperament
  rare
  hairless
  life_span
  name
  origin
  country_code
}

あなたがしなければならないすべてはクリックするだけですcountry_code あなたの品種フラグメントとこのコードで

query MyQuery {
  BreedById(id: "abys") {
    ...BreedFragment
    rare
  }
  allBreeds {
    ...BreedFragment
  }
}

fragment BreedFragment on Breed {
  temperament
  rare
  hairless
  life_span
  name
  origin
  country_code
}

このクエリは結果として得られるJSON ALT名を自動的に入力します.

{
  "data": {
    "BreedById": {
      "country_code": "EG",
      "hairless": 0,
      "life_span": "14 - 15",
      "name": "Abyssinian",
      "origin": "Egypt",
      "rare": 0,
      "temperament": "Active, Energetic, Independent, Intelligent, Gentle"
    }, {...} etc

ここからどこへ行くか

私はあなたのGraphSQLのコーディング経験をスピードアップする方法を学んだことを願って!
Stezzenの他の機能に興味を持っている場合は、私たちのステップ禅スキーマエクスプローラで私たちのドキュメントをチェックアウトすることができます.そこには、アポロやギャツビーのクライアントコード、スキーマテンプレートのエクスポート、およびドキュメントのタブを生成するのに役立つエクスポートを含む、あなたのコーディングの経験を合理化する他の方法がたくさんあります.
私たちはあなたがStezenと何をしている知ってみよう!私たちはそれについて聞いてみたい.