The GraphQL Interface

Panel Layout

The GraphQL tab is designed for API exploration and query building. It features a request bar at the top, a split request panel on the left, and response panel on the right.

Interface Layout

GraphQL
https://api.example.com/graphql
Send

Request Bar - URL + Send button

QueryVariablesHeadersAuth
FetchSearch fields...
Query
users[User!]!

Schema Explorer

query {
users { id name }
}

Query Editor

BodyHeadersDetail
{
"data": {
"users": [...]
}
}

Response Panel

Request Bar

The top bar contains the endpoint URL and send button:

GraphQL

Protocol Badge

Indicates this is a GraphQL tab (not HTTP or SSE).

URL input...

GraphQL Endpoint URL

Enter the GraphQL API endpoint. Supports environment variables. When the URL changes, schema is automatically fetched after a short delay. You can also manually re-fetch the schema using the Fetch button in the Schema Explorer.

Send

Send / Cancel Button

Execute the GraphQL query. Changes to "Cancel" during request. Press Enter in the URL field to send quickly.

GetUsers

Operation Picker

Appears only when the document defines more than one named operation. A GraphQL request runs a single operation, and this is how you say which one.

What Goes Out on the Wire

Whatever you build in the panel, Atrahasis sends one thing: a POST to the endpoint with a JSON body.

POST /graphql
{
"query": "query { users { id name } }",
"variables": { ... },
"operationName": "..."
}
  • • Queries, mutations, and subscriptions all use the same POST body. The operation type lives in the document, not the transport.
  • • The operation name is read from the document itself. A named operation is sent with its name, an anonymous one is sent without, and a stale name left over from an edit is never sent.
  • • Environment variables resolve in the URL, in header values, and in every auth field, so the same tab points at dev, staging, or production by switching environments.
  • • The request travels through the same HTTP engine as an ordinary request in Atrahasis, which is why the Detail tab has full connection and TLS information for GraphQL too.

Request Panel Tabs

The left panel has four tabs for building your request:

Query

The main query editing area. Split into two sections:

  • Schema Explorer (top) - Browse and select fields. Includes a search bar to filter fields by name with auto-expanding matching nodes.
  • Query Editor (bottom) - View/edit the generated query

The divider between them is draggable - resize as needed.

Variables

JSON editor for query variables. Variables from schema explorer arguments are auto-populated here. Edit values as needed.

Headers

Add custom HTTP headers to the request. Same interface as HTTP requests.Content-Type: application/json and Accept: application/json are added automatically, and a header you set here overrides them.

Auth

Configure authentication: Bearer token, Basic auth, API key (header or query string), or OAuth 2.0 with automatic token refresh. The same credentials are used for schema introspection, so an API that requires auth to describe itself works here too.

Response Panel

The right panel displays the GraphQL response with three tabs:

Body

The JSON response from the GraphQL server. Shows both data anderrors if present. Use Format/Minify buttons to adjust display.

Headers

HTTP response headers from the server.

Detail

Request timing information: DNS lookup, TCP connection, TLS handshake, time to first byte, and total duration. Plus request/response sizes.