Monacoエディタ
クエリエディタはMonaco上に構築されており、VS Codeと同じエンジンです。以下の機能を提供するGraphQL言語ワーカーを搭載しています：
- GraphQLオペレーション、フィールド、引数、ディレクティブのシンタックスハイライト
- スキーマ駆動の自動補完 —
Ctrl+Spaceを押すと、ライブスキーマに基づいて利用可能なフィールド、引数、型が表示されます
- リアルタイムエラー検出 — 無効なフィールド名、不足している引数、型の不一致に対する赤い下線とエラーマーカー
- 中括弧、括弧、文字列のブラケットマッチングと自動クローズ
- 一括変更のためのマルチカーソル編集
自動補完はスキーマ対応です。Cube内（例：DEXTrades）で入力すると、そのCubeに有効なフィールドと引数のみがサジェストリストに表示されます。
エディタパネル
エディタエリアは下部に3つのタブに分かれています。リクエストの異なる部分を設定するために切り替えてください。
クエリパネル
GraphQLクエリを記述するメインの編集エリアです。ここでMonacoの自動補完、ハイライト、エラー検出が有効です。
query {
DEXTrades(
network: sol
limit: {count: 10}
orderBy: Block_Time_DESC
) {
Block { Time }
Transaction { Hash }
Trade {
Buy { Currency { MintAddress } Amount PriceInUSD }
Sell { Currency { MintAddress } Amount }
Dex { ProtocolName }
}
}
}
変数パネル
変数パネルを使用して、パラメータ化されたクエリにJSON変数を渡します。クエリテキストを編集せずに変数値を変更するだけで、クエリを再利用可能に保ちます。
query LatestTrades($network: Network!, $limit: Int!) {
DEXTrades(
network: $network
limit: {count: $limit}
orderBy: Block_Time_DESC
) {
Block { Time }
Trade {
Buy { Currency { MintAddress } Amount PriceInUSD }
Sell { Currency { MintAddress } Amount }
}
}
}
{
"network": "sol",
"limit": 20
}
ヘッダーパネル
すべてのリクエストで送信されるHTTPヘッダーを設定します。ヘッダーパネルはデフォルトで表示され、X-API-KEYヘッダーが事前設定されています。
{
"X-API-KEY": "your_api_key"
}
Content-Type: application/jsonヘッダーは自動的に含まれます — 手動で設定する必要はありません。
ツールバー
ツールバーはエディタの上部にあり、クイックアクセス操作を提供します：
| ボタン | アクション | 説明 |
|---|
| Execute (▶) | クエリ実行 | 現在のクエリ（変数とヘッダー付き）をGraphQLエンドポイントに送信 |
| Prettify | クエリ整形 | 一貫したインデントと改行でクエリを自動フォーマット |
| Copy | クエリコピー | 現在のクエリテキストをクリップボードにコピー |
| Merge | フラグメントマージ | インラインフラグメントを1つのフラット化されたクエリにマージ |
| Save Query | ローカル保存 | タイトルとオプションのタグ付きで現在のクエリを保存 |
| Export Code | スニペットエクスポート | 選択した言語で現在のクエリのコードスニペットを生成 |
クエリの実行
クエリを実行するには：
- エディタにクエリを記述またはロード
- ヘッダーパネルで
X-API-KEYを設定
- ツールバーのExecuteボタン（▶）をクリック、またはCtrl/Cmd+Enterを押す
レスポンスはエディタの右側の結果パネルにフルJSONシンタックスハイライトで表示されます。クエリにエラーがある場合、エラーメッセージと位置の詳細を含むエラーレスポンスが表示されます。
結果パネル
結果パネルはGraphQLエンドポイントからのJSONレスポンスを以下の機能で表示します：
- JSONキー、文字列、数値、ブーリアンのシンタックスハイライト
- 深くネストされたレスポンスをナビゲートするための折りたたみ可能なノード
- 右クリックコンテキストメニューによるレスポンスコピーサポート
典型的な成功レスポンスには、クエリ構造に一致するdataオブジェクトと、課金情報を示すextensions.creditsオブジェクトが含まれます。
ステータスバー
IDEの下部にあるステータスバーは、クエリ実行に関するリアルタイムフィードバックを提供します：
| インジケータ | 値 | 説明 |
|---|
| State | Ready · Executing... · Success · Error | 現在のリクエストライフサイクル状態 |
| Latency | 例：120ms | リクエスト送信からレスポンス受信までのラウンドトリップ時間 |
| Size | 例：2.4 KB | レスポンスボディサイズ |
| Credits | 例：8 CU | このクエリで消費されたクレジットユニット |
クレジットユニット（CU）はクエリの計算コストを反映します。より多くのデータをスキャンするクエリや、より大きな結果セットを返すクエリはより多くのCUを消費します。詳細は課金とクレジットをご覧ください。
キーボードショートカット
| ショートカット | アクション |
|---|
Ctrl/Cmd + Enter | クエリ実行 |
Ctrl/Cmd + B | サイドバー切り替え |
Ctrl + Space | 自動補完トリガー |
Ctrl/Cmd + Shift + P | コマンドパレット |
Ctrl/Cmd + / | 行コメント切り替え |
Ctrl/Cmd + D | 次の出現箇所を選択 |
Ctrl/Cmd + Shift + F | フォーマット/整形 |
Alt + Up/Down | 行を上下に移動 |
macOSではCtrlをCmdに置き換えてください。IDEはOSを自動検出し、適切な修飾キーを表示します。
