# GraphiQL — In-Browser IDE for Exploring GraphQL APIs

> The official in-browser IDE for writing, validating, and testing GraphQL queries with autocompletion, real-time error highlighting, and built-in documentation explorer.

## Install

Save in your project root:

# GraphiQL — In-Browser IDE for Exploring GraphQL APIs

## Quick Use
```bash
npm install graphiql react react-dom

# Or use the CDN-hosted standalone version:
# npx serve and open the HTML file below
```
```jsx
import { GraphiQL } from 'graphiql';
import 'graphiql/graphiql.css';

function App() {
  return <GraphiQL fetcher={async (params) =>
    fetch('/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params),
    }).then(r => r.json())
  } />;
}
```

## Introduction
GraphiQL (pronounced "graphical") is the official in-browser IDE for GraphQL, maintained by the GraphQL Foundation. It provides developers with an interactive environment to write queries, explore schemas through its built-in documentation explorer, and test API responses in real time. GraphiQL has become the standard development interface shipped with most GraphQL server frameworks.

## What GraphiQL Does
- Provides a rich query editor with syntax highlighting, bracket matching, and intelligent autocompletion
- Explores schemas via an integrated documentation sidebar showing types, fields, and descriptions
- Validates queries in real time against the target schema, highlighting errors inline
- Supports query variables, HTTP headers, and multiple tabs for organizing work
- Offers a plugin architecture for extending functionality with custom panels and toolbar items

## Architecture Overview
GraphiQL is built as a React component library with a modular plugin system. The core editor uses CodeMirror 6 for text editing, layering GraphQL-aware language services on top for autocompletion and diagnostics. The documentation explorer introspects the schema via the standard introspection query and renders navigable type documentation. A plugin API allows third-party extensions to add sidebar panels, toolbar buttons, and custom behaviors. The fetcher interface abstracts transport, supporting HTTP, WebSocket subscriptions, and custom protocols.

## Self-Hosting & Configuration
- Install as a React component: `npm install graphiql` and render inside your application
- Configure the `fetcher` prop to point at any GraphQL endpoint — HTTP or WebSocket
- Customize the default query, variables, and headers via props
- Add plugins like the Explorer plugin for point-and-click query building
- Deploy as a standalone HTML page using the UMD bundle for quick prototyping

## Key Features
- Real-time schema-aware autocompletion that understands your types, fields, and arguments
- Built-in documentation explorer for browsing the full schema without leaving the IDE
- Support for GraphQL subscriptions over WebSocket with live result streaming
- Tabbed interface for managing multiple queries and switching between operations
- Plugin system with official plugins for query history, snippet management, and visual query building

## Comparison with Similar Tools
- **GraphQL Playground** — a popular alternative IDE now in maintenance mode; GraphiQL is the actively maintained successor
- **Apollo Studio Explorer** — a cloud-hosted GraphQL IDE with team features; GraphiQL is fully self-hosted and open source
- **Insomnia** — a general-purpose API client with GraphQL support; GraphiQL is purpose-built for GraphQL with deeper schema integration
- **Altair GraphQL Client** — a desktop and browser extension client with similar features; GraphiQL benefits from being the official Foundation project
- **Postman** — supports GraphQL queries but lacks the schema-aware editing depth of GraphiQL

## FAQ
**Q: What is the difference between GraphiQL and GraphQL Playground?**
A: GraphQL Playground was a popular fork of the original GraphiQL. The Playground project is now in maintenance mode, and its maintainers recommend migrating to GraphiQL 2+, which incorporates many of the features that made Playground popular.

**Q: Can GraphiQL connect to any GraphQL server?**
A: Yes. GraphiQL uses a fetcher function that you provide, so it can connect to any GraphQL endpoint regardless of the server implementation. You control the transport, headers, and authentication.

**Q: Does GraphiQL support GraphQL subscriptions?**
A: Yes. By providing a fetcher that handles WebSocket connections (such as graphql-ws), GraphiQL can send subscription operations and display results as they stream in.

**Q: Can I embed GraphiQL in my own application?**
A: Yes. GraphiQL is distributed as a React component that you can embed in any React application. It can also be used as a standalone HTML page via the UMD bundle.

## Sources
- https://github.com/graphql/graphiql
- https://graphiql-test.netlify.app/

---
Source: https://tokrepo.com/en/workflows/asset-7fda1d8c
Author: AI Open Source