コンテンツにスキップ

APIエクスプローラー

API エクスプローラーは、プロジェクトの GraphQL API をブラウザ上で探索するための IDE です。Archie Core の開発者がワークスペース内から GraphQL クエリを簡単に作成・実行できます。

API エクスプローラーは、実際の本番データを使用します。

alt text


GraphQL スキーマには、スキーマの構造を公開する組み込みのイントロスペクション機能があります。これにより API エクスプローラーは、GraphQL クエリを書くときに強力なオートコンプリートを提供できます。

items ブロック内では “em” と入力します。ここから API で利用可能な操作のemail フィールドを見つけて選択しやすくなります。オートコンプリートは、構築中のクエリ内の位置に応じて文脈的に動作し、入力内容に合わせて候補を絞り込みます。

alt text

オートコンプリートメニューを手動で開き、候補を表示するには、[Shift] + [SPACE] を押します。コンテキストメニューが表示され、リストから items などのフィールドを選択できます。

alt text

さらに、イントロスペクションはクエリのエラー検出にも役立ちます。型が利用できない、または誤って設定されている場合(Number は String であるべき、テーブルにフィールドがない、バリデーションなど)をシステムが認識します。API エクスプローラーでは、赤い波線の上にマウスを置くとエラーのツールチップが表示されます。

alt text

API エクスプローラーには、クエリ作成時にデータモデルを理解できるよう組み込みのスキーマリファレンスがあります。次の 2 つの方法で開けます。

右上のツールバーにある Documentation ボタンをクリックします。左側にサイドバーが開き、利用可能な Queries、Mutations、Types を参照・検索できます。

alt text

2. 文脈に応じたクイックナビゲーション

Section titled “2. 文脈に応じたクイックナビゲーション”

図のとおり、入力中の特定フィールドのドキュメントへ直接ジャンプできます。

  • エディタ内のフィールド名(例:cities)にマウスを置くと、戻り値の型(例:CitiesConnection)がツールチップに表示されます。
  • ツールチップ内の型名をクリックします。
  • ドキュメントのサイドバーが開き、その型定義へ直接移動し、利用可能なサブフィールド(itemscountaggregates など)と説明を確認できます。

alt text

Composer は、API エクスプローラー左側に通常デフォルトで表示される視覚的なクエリビルダーです。フィールドと引数を選ぶと、有効な GraphQL 構文が自動生成されます。

パネルを閉じた場合や表示されない場合は、次のように再度開けます。

  • 右上のツールバーにある Composer ボタンを探します。
  • Documentation ボタンのすぐ横にあります。
  • クリックすると Composer サイドバーが切り替わり、ビジュアルエディタが再表示されます。

alt text

cities を開き、count オプションを試してください。次のクエリがエディタに入力され、実行すると都市の件数を確認できます。

query MyQuery {
cities {
items {
nameCity
}
}
}

alt text