跳轉到主要內容

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 }
    }
  }
}

Headers 面板

配置隨每次請求傳送的 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匯出片段按所選語言生成當前查詢的程式碼片段

執行查詢

執行步驟:
  1. 在編輯器中編寫或載入查詢
  2. 在 Headers 面板設定 X-API-KEY
  3. 點選工具欄中的 Execute(▶),或按 Ctrl/Cmd+Enter
響應顯示在編輯器右側 Results Panel,JSON 帶完整語法高亮。若查詢有誤,會展示錯誤響應及錯誤資訊與位置。

Results 面板

結果面板展示 GraphQL 端點返回的 JSON,並提供:
  • JSON 鍵、字串、數字與布林值的 語法高亮
  • 用於瀏覽深層巢狀響應的 可摺疊節點
  • 透過右鍵選單 複製響應
典型成功響應包含與查詢結構對應的 data 物件,以及展示計費資訊的 extensions.credits 物件。

狀態列

IDE 底部狀態列實時反饋查詢執行情況:
指示項取值示例說明
StateReady · Executing... · Success · Error當前請求生命週期狀態
Latency120ms從發出請求到收到響應的往返時間
Size2.4 KB響應體大小
Credits8 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 會檢測作業系統並顯示對應的修飾鍵。