graphiql

library5.2.3jsnpmunverified

GraphiQL is an interactive in-browser GraphQL IDE, version 5.2.3. It provides a graphical interface for exploring and testing GraphQL APIs, with features like syntax highlighting, auto-completion, documentation explorer, and history. Released actively, it is the official IDE from the GraphQL Foundation. Key differentiators include full integration with GraphQL language features, extensibility via plugins, and lightweight setup compared to alternatives like GraphQL Playground. Peer dependencies include React 18 or 19 and GraphQL 15-17.

devops

npm install graphiql

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHIQL

graphiql

devopsjavascriptv5.2.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

GraphiQL

✓ import { GraphiQL } from 'graphiql'

✗ import GraphiQL from 'graphiql'

Named export since v2; default export removed in v3

useTheme

✓ import { useTheme } from '@graphiql/react'

✗ import { useTheme } from 'graphiql'

useTheme moved to @graphiql/react in v5

themeStyle

✓ import { themeStyle } from 'graphiql/dist/theme'

✗ import { themeStyle } from 'graphiql/theme'

Exact path required in v5, dist is necessary

Basic GraphiQL setup with a custom fetcher function, rendering the IDE component with CSS.

import React from 'react'; import ReactDOM from 'react-dom/client'; import { GraphiQL } from 'graphiql'; import 'graphiql/graphiql.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(React.createElement(GraphiQL, { fetcher: async (graphQLParams) => fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(graphQLParams) }).then(res => res.json()) }));

Debug

Known issues

breakingDefault export removed in v3; must use named export GraphiQL.

fix

Use import { GraphiQL } from 'graphiql'

affects: >=3.0.0

breakinguseTheme hook moved to @graphiql/react in v5; importing from graphiql will fail.

fix

Install @graphiql/react and import from there

affects: >=5.0.0

deprecatedCSS import path changed; old path 'graphiql/graphiql.css' still works but 'graphiql/dist/graphiql.css' is preferred.

fix

Use import 'graphiql/graphiql.css' or 'graphiql/dist/graphiql.css'

affects: >=5.0.0

gotchaGraphiQL fetcher must return a Promise resolving to a FetchResult object, not a raw Response.

fix

Ensure fetcher returns parsed JSON object with { data, errors } etc.

affects: >=1.0.0

gotchaPeer dependencies must be installed manually; GraphiQL does not install React or GraphQL automatically.

fix

Install react, react-dom, and graphql as dependencies

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'graphiql/graphiql.css'

CSS file path changed in v5.

fix

Use import 'graphiql/graphiql.css' (without dist).

Attempted import error: 'GraphiQL' is not exported from 'graphiql'.

Using default import instead of named import in v3+.

fix

Use import { GraphiQL } from 'graphiql'

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

React version mismatch or multiple React instances.

fix

Ensure app and GraphiQL use same React version. Check package.json for multiple react entries.

Upgrade

Version history

5.2.3latest on npm

Audit

Dependencies

reactrequiredUI rendering

react-domrequiredUI rendering DOM-specific

graphqlrequiredCore GraphQL functionality

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/graphql/graphiql ↗

packagegraphiql ↗

homepagehttps://github.com/graphql/graphiql/tree/master/packages/graphiql#readme ↗