GraphQL Query Plus Response

GraphQL studio

Author the query, watch the shape land

Type a query on the left, the response shape mirrors back on the right — exactly the fields you asked for, nothing else.

orders.gqlquery
# Pull recent paid orders
query GetOrders($status: String!) {
  orders(status: $status, limit: 3) {
    id
    customer {
      email
      name
    }
    amount
    status
    createdAt
  }
}
response.json200 ok
// Mirrors the requested shape
{
  "data": {
    "orders": [
      {
        "id": "ord_3PqA",
        "customer": {
          "email": "[email protected]",
          "name": "Lisa Park"
        },
        "amount": 4200,
        "status": "paid"
      }
    ]
  }
}
138ms·1 of 247 records
412 B
About this block

GraphQL Query Plus ResponsePRO

Browser-chrome card pairing two minimal code panes — GraphQL query on the left, mirrored JSON response on the right. Monochrome syntax with muted comments and a timing footer. Every label is editable; no media props required.

More Showcase blocks

View all Showcase
PRO

showcase22

Database Query With Code Editor

PRO

showcase34

Polyglot Code Comparison

PRO

showcase31

TypeScript Types Plus Usage

Get Pro access