はじめに
はじめにGraphiQLクライアント入門

GraphiQLクライアント入門

Gato GraphQLは、GraphQLサービスと対話するためのGraphiQLクライアントを提供しています。プラグインのメニューにある「GraphiQL」をクリックしてアクセスします:

GraphiQLクライアント

GraphiQLを使うと、GraphQLクエリを作成・実行し、そのレスポンスを確認できます:

GraphiQLでクエリを実行する

GraphiQLクライアントガイド

GraphiQLクライアントを使ってGraphQLクエリを作成・実行する方法を説明します。

GraphQLクエリは左側のパネルで作成します:

GraphiQLクライアント

GraphiQLにはGraphQLの構文に対応したシンタックスハイライト機能があります。クエリを作成し始めると、オペレーション名、開閉ブラケット、フィールド、引数、ディレクティブ、コメントがそれぞれ異なる色で表示され、クエリの構造を把握しやすくなります:

シンタックスハイライト

初回ロード時、GraphiQLはイントロスペクションを通じてGraphQLスキーマのメタデータを取得します。スキーマのメタデータにより、クエリ作成中のあらゆる場面でGraphiQLがオートコンプリートの候補を提示します:

オートコンプリートの候補

ドキュメントエクスプローラーを使ってスキーマのメタデータを参照することもできます。開くには「Docs」ボタンをクリックします:

Docsボタン

ドキュメントエクスプローラーが右側に表示されます:

ドキュメントエクスプローラー

GraphQLタイプ名をクリックすると、ドキュメントエクスプローラーに次の情報が表示されます:

  • タイプの説明
  • 実装しているインターフェース
  • すべてのフィールドの一覧(以下を含む):
    • 受け取る引数
    • 戻り値の型(クリックして詳細を確認できます)
    • フィールドの説明

タイプ名をクリックする

タイプ情報を表示する

いつでも、スキーマの任意の要素を検索して情報を取得できます:

検索する

クエリ内の任意の要素にカーソルを合わせるとその情報が表示され、ctrl(またはcmd)+クリックでドキュメントエクスプローラーに表示できます:

スキーマ要素をクリックする

下部の「Query variables」パネルをクリックすると、クエリに渡す変数をvariable => valueのJSONマップ形式で入力できます:

Query variablesパネルを開く

クエリ変数を入力する

GraphQLクエリを実行するには、「Run」ボタンを押すか、ctrl(またはcmd)+enterを押します:

GraphQLクエリを実行する

GraphQLのレスポンスは中央のパネルに表示されます:

GraphQLクエリのレスポンス

上部のパネルには、GraphiQL用のさまざまなアドオンがあります:

GraphiQLのアドオン

各アドオンボタンをクリックすると、それぞれの操作が実行されます:

  • 「Prettify」はGraphQLクエリを整形します
  • 「History」は直近の過去クエリの一覧を表示し、クリックするとクエリエディターに入力されます
  • 「Explorer」はGraphiQL Explorerパネルを開きます

GraphiQL Explorerは非常に便利なアドオンです。すべてのフィールドの一覧が表示され、クリックするとエディターのクエリに追加されるため、GraphQLクエリをビジュアルな操作で作成できます:

GraphiQL Explorer