Registry / devops / graphql-playground-react

graphql-playground-react

JSON →
library1.7.28jsnpmunverified

GraphQL Playground is a powerful GraphQL IDE for development workflows, offering features like interactive multi-column documentation, real-time GraphQL Subscriptions, query history, tabs, and HTTP header configuration. The current stable version is 1.7.28, with a moderate release cadence. It is built on top of GraphiQL components but provides a richer experience. It is available as a React component, desktop app, and server middleware for Express, Hapi, Koa, and Lambda.

devops
npm install graphql-playground-react
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · GRAPHQL-PLAYGROUND
G
graphql-playground-react
devopsjavascriptv1.7.28
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.

Playground (default)
✓ import Playground from 'graphql-playground-react'
✗ import { Playground } from 'graphql-playground-react'
The main component is a default export. Named export does not exist.
Playground (require)
✓ const Playground = require('graphql-playground-react').default
✗ const Playground = require('graphql-playground-react')
In CommonJS, use .default because the package is ESM-first with a default export.
Middleware (Express example)
✓ import { express as playground } from 'graphql-playground-middleware-express'
✗ import playground from 'graphql-playground-middleware-express'
Server middlewares are named exports per framework (express, hapi, koa, lambda).

Renders a GraphQL Playground React component with endpoint and subscriptionEndpoint configured via environment variables.

import React from 'react'; import ReactDOM from 'react-dom'; import Playground from 'graphql-playground-react'; const App = () => ( <Playground endpoint={process.env.GRAPHQL_ENDPOINT ?? 'https://api.example.com/graphql'} subscriptionEndpoint={process.env.GRAPHQL_SUBSCRIPTION_ENDPOINT ?? 'wss://api.example.com/graphql'} setTitle={true} /> ); ReactDOM.render(<App />, document.getElementById('root'));
Debug
Known issues
breakingReact 16 or higher is required. React 15 is not supported and will not work.
fix
Upgrade React to version 16 or higher.
affects: <16.0
deprecatedThe graphql-playground package (without -react) is deprecated. Use graphql-playground-react instead.
fix
Replace import from 'graphql-playground' with 'graphql-playground-react'.
affects: >=1.0
gotchaDo not use named import { Playground } - only default export exists.
fix
Use import Playground from 'graphql-playground-react'.
affects: >=1.0
Errors
Common errors & fixes
Module not found: Can't resolve 'graphql-playground-react'
Package not installed or incorrect package name.
fix
Run 'npm install graphql-playground-react' or 'yarn add graphql-playground-react'.
Attempted import error: 'Playground' is not exported from 'graphql-playground-react'
Using named import instead of default import.
fix
Change to 'import Playground from 'graphql-playground-react''.
Uncaught ReferenceError: React is not defined
React is not installed or imported in the file using GraphQL Playground.
fix
Ensure 'import React from 'react'' is present in the file.
Upgrade
Version history
1.7.28latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
6 hits · last 30 days
node
6
Resources
githubssh://git@github.com/graphcool/graphql-playground ↗
packagegraphql-playground-react ↗
homepagehttps://github.com/graphcool/graphql-playground#readme ↗
graphql-playground-react — npm install graphql-playground-react · libregistry