Skip to main content

Monaco エディタ

クエリエディタは Monaco(VS Code と同じエンジン)を基盤にし、GraphQL 用の language worker により次を提供します。
  • GraphQL のオペレーション、フィールド、引数、ディレクティブ向けの シンタックスハイライト
  • スキーマ連動のオートコンプリートCtrl+Space で、ライブスキーマに基づく利用可能なフィールド・引数・型を表示
  • リアルタイムのエラー検出 — 無効なフィールド名、不足引数、型の不一致に対する赤い下線とエラーマーカー
  • 波括弧、括弧、文字列の 括弧対応自動クローズ
  • 一括編集向けの マルチカーソル
オートコンプリートはスキーマを認識します。Cube 内(例: DEXTrades)で入力すると、その Cube で有効なフィールドと引数だけが候補に現れます。

エディタのパネル

エディタ領域の下部に 3 つのタブがあります。リクエストの各部分を切り替えて設定します。

Query パネル

GraphQL クエリを書くメイン領域です。Monaco のオートコンプリート、ハイライト、エラー検出がここで有効になります。

Variables パネル

パラメータ化されたクエリに JSON variables を渡します。クエリ本文を編集せずに variable の値だけ変えられるため、再利用しやすくなります。

Headers パネル

すべてのリクエストに付与する HTTP ヘッダーを設定します。Headers パネルは デフォルトで表示され、X-API-KEY ヘッダーが事前設定されています。
必要に応じて追加のカスタムヘッダーも設定できます。すべてのヘッダーは GraphQL エンドポイントへの POST リクエストの一部として送信されます。
Content-Type: application/json ヘッダーは自動で付与されます — 手動で設定する必要はありません。

ツールバー

ツールバーはエディタ上部にあり、よく使う操作にすぐアクセスできます。

クエリの実行

クエリを実行する手順:
  1. エディタにクエリを書くか読み込む
  2. Headers パネルで X-API-KEY を設定する
  3. ツールバーの Execute (▶) をクリックするか、Ctrl/Cmd+Enter を押す
レスポンスはエディタ右側の Results Panel に表示され、JSON のシンタックスハイライト付きです。クエリにエラーがある場合は、メッセージと位置情報付きのエラーレスポンスが表示されます。

Results パネル

結果パネルには GraphQL エンドポイントからの JSON レスポンスが表示されます。
  • JSON のキー、文字列、数値、真偽値の シンタックスハイライト
  • 深くネストしたレスポンスを辿る 折りたたみ可能なノード
  • 右クリックメニューからの レスポンスのコピー
成功時は、クエリ構造に対応する data オブジェクトに加え、課金情報を示す extensions.credits オブジェクトが含まれるのが一般的です。

ステータスバー

IDE 下部のステータスバーは、クエリ実行に関するリアルタイムのフィードバックを表示します。
Credit Units (CU) はクエリの計算コストを表します。より多くのデータを走査したり、より大きな結果セットを返すクエリほど CU を多く消費します。詳しくは Billing & Credits を参照してください。

キーボードショートカット

macOS では Ctrl の代わりに Cmd を使います。IDE は OS を検出し、適切な修飾キーを表示します。