Monaco エディタ
クエリエディタは Monaco(VS Code と同じエンジン)を基盤にし、GraphQL 用の language worker により次を提供します。- GraphQL のオペレーション、フィールド、引数、ディレクティブ向けの シンタックスハイライト
- スキーマ連動のオートコンプリート —
Ctrl+Spaceで、ライブスキーマに基づく利用可能なフィールド・引数・型を表示 - リアルタイムのエラー検出 — 無効なフィールド名、不足引数、型の不一致に対する赤い下線とエラーマーカー
- 波括弧、括弧、文字列の 括弧対応 と 自動クローズ
- 一括編集向けの マルチカーソル
エディタのパネル
エディタ領域の下部に 3 つのタブがあります。リクエストの各部分を切り替えて設定します。Query パネル
GraphQL クエリを書くメイン領域です。Monaco のオートコンプリート、ハイライト、エラー検出がここで有効になります。Variables パネル
パラメータ化されたクエリに JSON variables を渡します。クエリ本文を編集せずに variable の値だけ変えられるため、再利用しやすくなります。- クエリ
- 変数
Headers パネル
すべてのリクエストに付与する HTTP ヘッダーを設定します。Headers パネルは デフォルトで表示され、X-API-KEY ヘッダーが事前設定されています。
Content-Type: application/json ヘッダーは自動で付与されます — 手動で設定する必要はありません。ツールバー
ツールバーはエディタ上部にあり、よく使う操作にすぐアクセスできます。クエリの実行
クエリを実行する手順:- エディタにクエリを書くか読み込む
- Headers パネルで
X-API-KEYを設定する - ツールバーの Execute (▶) をクリックするか、Ctrl/Cmd+Enter を押す
Results パネル
結果パネルには GraphQL エンドポイントからの JSON レスポンスが表示されます。- JSON のキー、文字列、数値、真偽値の シンタックスハイライト
- 深くネストしたレスポンスを辿る 折りたたみ可能なノード
- 右クリックメニューからの レスポンスのコピー
data オブジェクトに加え、課金情報を示す extensions.credits オブジェクトが含まれるのが一般的です。
ステータスバー
IDE 下部のステータスバーは、クエリ実行に関するリアルタイムのフィードバックを表示します。Credit Units (CU) はクエリの計算コストを表します。より多くのデータを走査したり、より大きな結果セットを返すクエリほど CU を多く消費します。詳しくは Billing & Credits を参照してください。

