> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chainstream.io/llms.txt
> Use this file to discover all available pages before exploring further.

# クエリエディタ

> Monaco ベースの GraphQL エディタ — 補完、シンタックスハイライト、パネル、リアルタイムクエリ実行

## Monaco エディタ

クエリエディタは [Monaco](https://microsoft.github.io/monaco-editor/)（VS Code と同じエンジン）を基盤にし、GraphQL 用の language worker により次を提供します。

* GraphQL のオペレーション、フィールド、引数、ディレクティブ向けの **シンタックスハイライト**
* **スキーマ連動のオートコンプリート** — `Ctrl+Space` で、ライブスキーマに基づく利用可能なフィールド・引数・型を表示
* **リアルタイムのエラー検出** — 無効なフィールド名、不足引数、型の不一致に対する赤い下線とエラーマーカー
* 波括弧、括弧、文字列の **括弧対応** と **自動クローズ**
* 一括編集向けの **マルチカーソル**

<Tip>
  オートコンプリートはスキーマを認識します。Cube 内（例: `DEXTrades`）で入力すると、その Cube で有効なフィールドと引数だけが候補に現れます。
</Tip>

***

## エディタのパネル

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

### Query パネル

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

```graphql theme={null}
query {
  Solana {
    DEXTrades(
      limit: {count: 10}
      orderBy: {descending: Block_Time}
    ) {
      Block { Time }
      Transaction { Hash }
      Trade {
        Buy { Currency { MintAddress } Amount PriceInUSD }
        Sell { Currency { MintAddress } Amount }
        Dex { ProtocolName }
      }
    }
  }
}
```

### Variables パネル

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

<Tabs>
  <Tab title="クエリ">
    ```graphql theme={null}
    query LatestTrades($limit: Int!) {
      Solana {
        DEXTrades(
          limit: {count: $limit}
          orderBy: {descending: Block_Time}
        ) {
          Block { Time }
          Trade {
            Buy { Currency { MintAddress } Amount PriceInUSD }
            Sell { Currency { MintAddress } Amount }
          }
        }
      }
    }
    ```
  </Tab>

  <Tab title="変数">
    ```json theme={null}
    {
      "limit": 20
    }
    ```
  </Tab>
</Tabs>

### Headers パネル

すべてのリクエストに付与する HTTP ヘッダーを設定します。Headers パネルは **デフォルトで表示**され、`X-API-KEY` ヘッダーが事前設定されています。

```json theme={null}
{
  "X-API-KEY": "your_api_key"
}
```

必要に応じて追加のカスタムヘッダーも設定できます。すべてのヘッダーは GraphQL エンドポイントへの POST リクエストの一部として送信されます。

<Note>
  `Content-Type: application/json` ヘッダーは自動で付与されます — 手動で設定する必要はありません。
</Note>

***

## ツールバー

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

| ボタン             | 操作           | 説明                                                  |
| :-------------- | :----------- | :-------------------------------------------------- |
| **Execute** (▶) | クエリ実行        | 現在のクエリ（variables と headers を含む）を GraphQL エンドポイントに送信 |
| **Prettify**    | クエリ整形        | インデントと改行を揃えて自動整形                                    |
| **Copy**        | クエリをコピー      | 現在のクエリ本文をクリップボードにコピー                                |
| **Merge**       | フラグメントをマージ   | インラインフラグメントを 1 つのフラットなクエリに統合                        |
| **Save Query**  | ローカル保存       | タイトルと任意のタグ付きで現在のクエリを保存                              |
| **Export Code** | スニペットをエクスポート | 選択した言語で現在のクエリのコードスニペットを生成                           |

***

## クエリの実行

クエリを実行する手順:

1. エディタにクエリを書くか読み込む
2. Headers パネルで `X-API-KEY` を設定する
3. ツールバーの **Execute** (▶) をクリックするか、**Ctrl/Cmd+Enter** を押す

レスポンスはエディタ右側の **Results Panel** に表示され、JSON のシンタックスハイライト付きです。クエリにエラーがある場合は、メッセージと位置情報付きのエラーレスポンスが表示されます。

***

## Results パネル

結果パネルには GraphQL エンドポイントからの JSON レスポンスが表示されます。

* JSON のキー、文字列、数値、真偽値の **シンタックスハイライト**
* 深くネストしたレスポンスを辿る **折りたたみ可能なノード**
* 右クリックメニューからの **レスポンスのコピー**

成功時は、クエリ構造に対応する `data` オブジェクトに加え、課金情報を示す `extensions.credits` オブジェクトが含まれるのが一般的です。

***

## ステータスバー

IDE 下部のステータスバーは、クエリ実行に関するリアルタイムのフィードバックを表示します。

| 表示          | 値の例                                            | 説明                      |
| :---------- | :--------------------------------------------- | :---------------------- |
| **State**   | `Ready` · `Executing...` · `Success` · `Error` | リクエストのライフサイクル状態         |
| **Latency** | 例: `120ms`                                     | 送信からレスポンス受信までの往復時間      |
| **Size**    | 例: `2.4 KB`                                    | レスポンスボディのサイズ            |
| **Credits** | 例: `8 CU`                                      | このクエリで消費した Credit Units |

<Info>
  Credit Units (CU) はクエリの計算コストを表します。より多くのデータを走査したり、より大きな結果セットを返すクエリほど CU を多く消費します。詳しくは [Billing & Credits](/jp/graphql/billing/graphql-billing) を参照してください。
</Info>

***

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

<div style={{ overflowX: 'auto', width: '100%' }}>
  | ショートカット                | 操作            |
  | :--------------------- | :------------ |
  | `Ctrl/Cmd + Enter`     | クエリ実行         |
  | `Ctrl/Cmd + B`         | サイドバーの表示切替    |
  | `Ctrl + Space`         | オートコンプリートを起動  |
  | `Ctrl/Cmd + Shift + P` | コマンドパレット      |
  | `Ctrl/Cmd + /`         | 行コメントの切替      |
  | `Ctrl/Cmd + D`         | 次の一致を選択       |
  | `Ctrl/Cmd + Shift + F` | 整形 / Prettify |
  | `Alt + Up/Down`        | 行を上下に移動       |
</div>

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