GraphiQL

GraphiQL is a graphical, in-browser IDE for exploring and testing GraphQL APIs. It allows developers to construct queries, inspect schemas, view documentation, and run operations — all from an intuitive UI.

Key Features

Query editor with syntax highlighting and autocomplete
Real-time results from your GraphQL API
Documentation explorer (auto-generated from your schema)
Variable and header panels
Easily test queries, mutations, and subscriptions

Getting Started

1. Install GraphiQL (Locally)

If you're building a GraphQL server, you can embed GraphiQL in your app:

With Express + Apollo Server

npm install @apollo/server express graphql

Then add:

app.use(
  "/graphql",
  graphqlHTTP({
    schema,
    graphiql: true,
  })
);

Visit http://localhost:4000/graphql to use GraphiQL.

2. Use Hosted GraphiQL Tools

You can use GraphiQL without installing anything:

Just enter your GraphQL endpoint and start exploring.

Using GraphiQL

Write a Query

{
  user(id: "1") {
    name
    email
  }
}

Use Variables

query GetUser($id: ID!) {
  user(id: $id) {
    name
  }
}

{
  "id": "1"
}

Use Headers

Click the "Headers" tab to send custom headers like auth tokens:

{
  "Authorization": "Bearer YOUR_TOKEN"
}

Schema Explorer

Click on the Docs sidebar to:

Browse types, fields, enums, and descriptions
Understand arguments and return types
Auto-complete based on the schema

This is automatically generated from your schema’s introspection.

Subscriptions

GraphiQL supports subscriptions via WebSockets if properly configured.

Example setup

subscription {
  newMessage {
    id
    content
  }
}

Not all versions of GraphiQL support subscriptions out of the box — consider using GraphQL Playground or Apollo Sandbox for better support.

Alternatives to GraphiQL

Tool	Features
GraphQL Playground	Modern UI, supports subscriptions
Apollo Sandbox	Fully hosted, works with Apollo Server
Insomnia/Postman	Good for GraphQL over HTTP
Altair	Cross-platform GraphQL IDE

Summary

GraphiQL is a powerful tool for exploring and testing GraphQL APIs.
It helps with learning, debugging, and documenting your API.
You can self-host it, or use it via various web-based interfaces.