Registry / testing / graphql-playground

graphql-playground

library1.3.17jsnpmunverified

GraphQL Playground is a powerful GraphQL IDE for better development workflows, featuring context-aware autocompletion, interactive multi-column schema documentation, real-time GraphQL Subscriptions support, query history, HTTP header configuration, tabs, and schema reloading. Current stable version is 1.3.17 (released 2018). It is built on top of GraphiQL but adds significant features like subscription support, automatic schema reloading, and a desktop app with graphql-config integration. The package provides a React component and server middleware for Express, Hapi, Koa, and AWS Lambda. It requires React 16 and includes TypeScript type definitions. Note: This package is deprecated in favor of GraphiQL 2.x or newer alternatives like Apollo Studio Explorer or GraphQL IDE.

testing

npm install graphql-playground

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHQL-PLAYGROUND

graphql-playground

testingjavascriptv1.3.17

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

✓ import Playground from 'graphql-playground'

✗ import { Playground } from 'graphql-playground'

Default export only; named import will fail.

expressMiddleware

✓ import expressPlayground from 'graphql-playground-middleware-express'

✗ import { expressPlayground } from 'graphql-playground-middleware-express'

The middleware packages export a default function.

CSS import

✓ import 'graphql-playground/playground.css'

✗ import style from 'graphql-playground/playground.css'

CSS must be imported as a side-effect; named import is incorrect.

Renders the GraphQL Playground React component with endpoint and subscription endpoint, including required CSS import.

// Install: yarn add graphql-playground react react-dom import React from 'react'; import ReactDOM from 'react-dom'; import Playground from 'graphql-playground'; import 'graphql-playground/playground.css'; const App = () => ( <Playground endpoint="https://api.example.com/graphql" subscriptionEndpoint="wss://api.example.com/graphql" setTitle={true} /> ); ReactDOM.render(<App />, document.getElementById('root'));

Debug

Known issues

deprecatedgraphql-playground is deprecated; consider using GraphiQL 2.x, Apollo Studio Explorer, or other modern GraphQL IDEs.

fix

Migrate to @graphiql/react or Apollo Studio Explorer.

affects: >=1.0.0

breakingRequires React 16; incompatible with React 17+ strict mode or React 18 without changes.

fix

Use with React 16 or wrap in compatibility layer.

affects: >=1.0.0 <2.0.0

gotchaSubscription endpoint must be explicitly provided; autodetection may fail with non-standard WebSocket protocols.

fix

Set subscriptionEndpoint prop explicitly using wss:// or ws://.

affects: >=1.0.0

gotchaCSS import is mandatory; without it the UI is broken or unstyled.

fix

Add import 'graphql-playground/playground.css' to your entry point.

affects: >=1.0.0

breakingMiddlewares require separate packages (express, hapi, koa, lambda); the base 'graphql-playground' is only the React component.

fix

Install the appropriate middleware package (e.g., graphql-playground-middleware-express).

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'graphql-playground/playground.css'

CSS file not imported or path incorrect.

fix

Ensure import 'graphql-playground/playground.css' is in your code.

Cannot read property 'render' of undefined

React version mismatch (requires React 16).

fix

Install React 16: npm install react@16 react-dom@16.

Could not find a valid GraphQL endpoint

Missing or incorrect endpoint prop.

fix

Pass endpoint prop to Playground component. Example: <Playground endpoint="https://example.com/graphql" />

Subscription endpoint not working

Subscription endpoint not provided or mismatched protocol.

fix

Set subscriptionEndpoint prop with wss:// URL. Example: subscriptionEndpoint="wss://example.com/graphql"

Upgrade

Version history

1.3.17latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React component; requires React 16

react-domrequiredpeer dependency for rendering React component

Agent activity

10 hits · last 30 days

node

Resources

githubhttp://github.com/graphcool/graphql-playground ↗

packagegraphql-playground ↗

homepagehttp://github.com/graphcool/graphql-playground ↗