Using GraphiQL and Apollo Sandbox

GraphiQL and Apollo Sandbox are browser-based tools that let you explore and test a GraphQL API without writing any code. They read your schema automatically, offer intelligent autocomplete, and display results instantly. Every GraphQL developer uses one of these tools daily.

What These Tools Do

  Feature                       GraphiQL        Apollo Sandbox
  ───────                       ────────        ──────────────
  Built-in schema explorer      ✓               ✓
  Query autocomplete            ✓               ✓
  Syntax highlighting           ✓               ✓
  Variables panel               ✓               ✓
  Query history                 ✗               ✓
  Collection saving             ✗               ✓
  Authentication headers        ✓ (manual)      ✓ (built-in header UI)
  Multiple server connections   ✗               ✓
  Response timing               ✗               ✓
  Free to use                   ✓               ✓

Apollo Sandbox – The Modern Choice

Apollo Sandbox runs at https://studio.apollographql.com/sandbox in any browser. Point it at your local server and it connects immediately. No sign-in is required for basic use.

  Access methods:
  ────────────────
  1. Browser: https://studio.apollographql.com/sandbox
  2. Local:   Apollo Server serves it at http://localhost:4000
             when NODE_ENV is not "production"
  3. Embedded: Add to any web page with the Sandbox library

The Sandbox Interface

  ┌─────────────────────────────────────────────────────────┐
  │ Apollo Sandbox                                          │
  ├──────────────┬──────────────────────────┬──────────────┤
  │              │  Query Editor            │  Response    │
  │  Schema      │  ─────────────────────   │  ─────────── │
  │  Explorer    │  query GetUser {         │  {           │
  │  ─────────   │    user(id: "1") {       │    "data": { │
  │  ▸ Query     │      name ← autocomplete │      "user"  │
  │  ▸ Mutation  │      email               │      ...     │
  │  ▸ Sub...    │    }                     │    }         │
  │              │  }                       │  }           │
  │              │                          │              │
  ├──────────────┴──────────────────────────┴──────────────┤
  │  Variables Panel: { "id": "1" }                        │
  │  Headers Panel:   Authorization: Bearer eyJ...         │
  └─────────────────────────────────────────────────────────┘

Using the Schema Explorer

The schema explorer on the left side lists every type, query, mutation, and subscription in your API. Click any field to see its type, arguments, and documentation string. This replaces the need for a separate API documentation page.

  Schema Explorer navigation:
  ─────────────────────────────
  Click "Query" → see all available queries
  Click "product" → see its arguments and return type
  Click "Product" type → see all its fields
  Click a field → see its type and description

Autocomplete in the Query Editor

Press Ctrl+Space (or Cmd+Space on Mac) anywhere in the query editor to see all valid completions at the cursor position. Autocomplete knows the schema and shows only fields that are valid at that exact location.

  Typing in the editor:
  ──────────────────────
  {
    user(id: "1") {
      [Ctrl+Space here]
      ↓ Autocomplete shows:
        name
        email
        phone
        posts
        createdAt
    }
  }

Setting Auth Headers for Protected Queries

  Steps to test authenticated endpoints:
  ───────────────────────────────────────
  1. Open the Headers panel at the bottom of the editor
  2. Add:  Authorization: Bearer eyJhbGci...your-token...
  3. Run a query that requires authentication
  4. Server reads the header via context and returns user-specific data

GraphiQL – The Lightweight Alternative

GraphiQL is an open-source, embeddable HTML page. Many GraphQL servers embed it as a development endpoint. It requires fewer clicks to start but has fewer features than Apollo Sandbox. Use it when you want a minimal, zero-configuration tool.

Key Points

• Apollo Sandbox and GraphiQL let you explore, test, and document a GraphQL API directly in the browser.
• Both tools read the schema automatically through introspection and provide autocomplete.
• Apollo Sandbox at localhost:4000 is available by default when Apollo Server runs in development mode.
• Use the Headers panel to send authorization tokens when testing protected operations.
• The Schema Explorer replaces manual API documentation for internal development.