Query Editor

Monaco Editor

The query editor is built on Monaco — the same engine behind VS Code — with a GraphQL language worker that provides:

Syntax highlighting for GraphQL operations, fields, arguments, and directives
Schema-driven autocomplete — press Ctrl+Space to see available fields, arguments, and types based on the live schema
Real-time error detection — red underlines and error markers for invalid field names, missing arguments, or type mismatches
Bracket matching and auto-closing for braces, parentheses, and strings
Multi-cursor editing for batch changes

Autocomplete is schema-aware. As you type inside a Cube (e.g. DEXTrades), only the fields and arguments valid for that Cube appear in the suggestion list.

Editor Panels

The editor area is divided into three tabs at the bottom. Switch between them to configure different parts of your request.

Query Panel

The main editing area where you write GraphQL queries. This is where Monaco’s autocomplete, highlighting, and error detection are active.

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 Panel

Use the Variables panel to pass JSON variables to parameterized queries. This keeps your queries reusable — change variable values without editing the query text.

Query
Variables

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

{
  "limit": 20
}

Headers Panel

Configure HTTP headers sent with every request. The Headers panel is shown by default with the X-API-KEY header pre-configured.

{
  "X-API-KEY": "your_api_key"
}

You can add additional custom headers as needed. All headers are sent as part of the POST request to the GraphQL endpoint.

The Content-Type: application/json header is automatically included — you do not need to set it manually.

The toolbar sits at the top of the editor and provides quick-access actions:

Button	Action	Description
Execute (▶)	Run query	Sends the current query (with variables and headers) to the GraphQL endpoint
Prettify	Format query	Auto-formats the query with consistent indentation and line breaks
Copy	Copy query	Copies the current query text to the clipboard
Merge	Merge fragments	Merges inline fragments into a single flattened query
Save Query	Save locally	Saves the current query with a title and optional tags
Export Code	Export snippet	Generates a code snippet for the current query in your chosen language

Executing Queries

To execute a query:

Write or load a query into the editor
Set your X-API-KEY in the Headers panel
Click the Execute button (▶) in the toolbar, or press Ctrl/Cmd+Enter

The response appears in the Results Panel on the right side of the editor with full JSON syntax highlighting. If the query contains errors, the error response is displayed with the error message and location details.

Results Panel

The results panel displays the JSON response from the GraphQL endpoint with:

Syntax highlighting for JSON keys, strings, numbers, and booleans
Collapsible nodes for navigating deeply nested responses
Copy response support via right-click context menu

A typical successful response includes a data object matching your query structure, plus an extensions.credits object showing billing information.

Status Bar

The status bar at the bottom of the IDE provides real-time feedback on query execution:

Indicator	Values	Description
State	`Ready` · `Executing...` · `Success` · `Error`	Current request lifecycle state
Latency	e.g. `120ms`	Round-trip time from request sent to response received
Size	e.g. `2.4 KB`	Response body size
Credits	e.g. `8 CU`	Credit Units consumed by this query

Credit Units (CU) reflect the computational cost of your query. Queries scanning more data or returning larger result sets consume more CU. See Billing & Credits for details.

Keyboard Shortcuts

Shortcut	Action
`Ctrl/Cmd + Enter`	Execute query
`Ctrl/Cmd + B`	Toggle sidebar
`Ctrl + Space`	Trigger autocomplete
`Ctrl/Cmd + Shift + P`	Command palette
`Ctrl/Cmd + /`	Toggle line comment
`Ctrl/Cmd + D`	Select next occurrence
`Ctrl/Cmd + Shift + F`	Format / Prettify
`Alt + Up/Down`	Move line up/down

On macOS, replace Ctrl with Cmd. The IDE automatically detects your operating system and displays the appropriate modifier key.

Getting Started

GraphQL IDE

Schema & Data Model

Query Examples

Billing & Credits

Monaco Editor

Editor Panels

Query Panel

Variables Panel

Headers Panel

Executing Queries

Results Panel

Status Bar

Keyboard Shortcuts

​Monaco Editor

​Editor Panels

​Query Panel

​Variables Panel

​Headers Panel

​Toolbar

​Executing Queries

​Results Panel

​Status Bar

​Keyboard Shortcuts

Monaco Editor

Editor Panels

Query Panel

Variables Panel

Headers Panel

Toolbar

Executing Queries

Results Panel

Status Bar

Keyboard Shortcuts