> ## 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 語言 worker，提供：

* **語法高亮**：GraphQL 操作、欄位、引數與指令
* **基於 schema 的自動補全** — 按 `Ctrl+Space` 檢視基於實時 schema 的可用欄位、引數與型別
* **實時錯誤檢測** — 無效欄位名、缺少引數或型別不匹配時顯示紅色下劃線與錯誤標記
* **括號匹配** 與 **自動閉合**：大括號、圓括號與字串
* **多游標編輯**：批次修改

<Tip>
  自動補全會感知 schema。在某一 Cube（如 `DEXTrades`）內輸入時，建議列表中只會出現該 Cube 合法的欄位與引數。
</Tip>

***

## 編輯器面板

編輯區域底部有三個標籤頁，可在其間切換以配置請求的不同部分。

### 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 面板

透過 Variables 面板向引數化查詢傳入 JSON 變數。這樣查詢可複用 — 修改變數值而無需改動查詢正文。

<Tabs>
  <Tab title="Query">
    ```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="Variables">
    ```json theme={null}
    {
      "limit": 20
    }
    ```
  </Tab>
</Tabs>

### Headers 面板

配置隨每次請求傳送的 HTTP 請求頭。Headers 面板 **預設顯示**，並已預置 `X-API-KEY` 請求頭。

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

可按需新增其他自定義請求頭。所有請求頭會隨 POST 請求一併傳送到 GraphQL 端點。

<Note>
  `Content-Type: application/json` 會自動新增 — 無需手動設定。
</Note>

***

## 工具欄

工具欄位於編輯器頂部，提供快捷操作：

| 按鈕              | 操作    | 說明                           |
| :-------------- | :---- | :--------------------------- |
| **Execute** (▶) | 執行查詢  | 將當前查詢（含變數與請求頭）傳送到 GraphQL 端點 |
| **Prettify**    | 格式化查詢 | 自動整理縮排與換行                    |
| **Copy**        | 複製查詢  | 將當前查詢文字複製到剪貼簿                |
| **Merge**       | 合併片段  | 將內聯片段合併為單一扁平查詢               |
| **Save Query**  | 本地儲存  | 以標題與可選標籤儲存當前查詢               |
| **Export Code** | 匯出片段  | 為當前查詢生成所選語言的程式碼片段            |

***

## 執行查詢

執行查詢的步驟：

1. 在編輯器中編寫或載入查詢
2. 在 Headers 面板設定 `X-API-KEY`
3. 點選工具欄 **Execute** (▶)，或按 **Ctrl/Cmd+Enter**

響應顯示在編輯器右側 **Results Panel**，JSON 帶完整語法高亮。若查詢有誤，會展示錯誤響應及錯誤資訊與位置詳情。

***

## 結果面板

結果面板展示 GraphQL 端點返回的 JSON，並提供：

* JSON 鍵、字串、數字與布林值的 **語法高亮**
* 可摺疊節點，便於瀏覽深層巢狀響應
* 右鍵選單支援 **複製響應**

典型成功響應包含與查詢結構對應的 `data` 物件，以及展示計費資訊的 `extensions.credits` 物件。

***

## 狀態列

IDE 底部狀態列實時反饋查詢執行狀態：

| 指示項         | 取值                                             | 說明                      |
| :---------- | :--------------------------------------------- | :---------------------- |
| **State**   | `Ready` · `Executing...` · `Success` · `Error` | 當前請求生命週期狀態              |
| **Latency** | 如 `120ms`                                      | 從發出請求到收到響應的往返耗時         |
| **Size**    | 如 `2.4 KB`                                     | 響應體大小                   |
| **Credits** | 如 `8 CU`                                       | 本查詢消耗的 Credit Units（CU） |

<Info>
  Credit Units（CU）反映查詢的計算成本。掃描資料更多或返回結果更大的查詢會消耗更多 CU。詳見 [計費與額度](/zh-Hant/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 會自動檢測作業系統並顯示對應的修飾鍵。
</Tip>