Monaco 編輯器
查詢編輯器基於 Monaco — 與 VS Code 同源 — 並配有 GraphQL language worker,提供:
- GraphQL 操作、欄位、引數與指令的 語法高亮
- 基於 schema 的自動補全 — 按
Ctrl+Space 檢視當前 live schema 下可用的欄位、引數與型別
- 實時錯誤檢測 — 無效欄位名、缺少引數或型別不匹配時顯示紅色下劃線與錯誤標記
- 花括號、括號與字串的 括號匹配 與 自動閉合
- 便於批次修改的 多游標編輯
自動補全會感知 schema。在某一 Cube(例如 DEXTrades)內輸入時,建議列表中只會出現對該 Cube 合法的欄位與引數。
編輯器面板
編輯器區域在底部分為三個標籤頁,切換即可配置請求的不同部分。
Query 面板
編寫 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 }
}
}
}
Variables 面板
在 Variables 面板中以 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 請求頭。Headers 面板 預設顯示,並已預填 X-API-KEY。
{
"X-API-KEY": "your_api_key"
}
可按需新增其他自定義請求頭。所有請求頭會作為 GraphQL 端點 POST 請求的一部分傳送。
Content-Type: application/json 會自動附帶 — 無需手動設定。
工具欄
工具欄位於編輯器頂部,提供快捷操作:
| 按鈕 | 操作 | 說明 |
|---|
| Execute(▶) | 執行查詢 | 將當前查詢(含 variables 與 headers)傳送到 GraphQL 端點 |
| Prettify | 格式化查詢 | 自動整理縮排與換行 |
| Copy | 複製查詢 | 將當前查詢文字複製到剪貼簿 |
| Merge | 合併片段 | 將 inline fragments 合併為單一扁平查詢 |
| Save Query | 本地儲存 | 以標題與可選標籤儲存當前查詢 |
| Export Code | 匯出片段 | 按所選語言生成當前查詢的程式碼片段 |
執行查詢
執行步驟:
- 在編輯器中編寫或載入查詢
- 在 Headers 面板設定
X-API-KEY
- 點選工具欄中的 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 |
Credit Units(CU)反映查詢的計算成本。掃描更多資料或返回更大結果集會消耗更多 CU。詳見 計費與 Credits。
鍵盤快捷鍵
| 快捷鍵 | 操作 |
|---|
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 | 上移/下移當前行 |
在 macOS 上,將 Ctrl 換為 Cmd。IDE 會檢測作業系統並顯示對應的修飾鍵。