{"id":47920,"library":"graphql-playground-react","title":"GraphQL Playground","description":"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.","status":"maintenance","version":"1.7.28","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/graphcool/graphql-playground","tags":["javascript","typescript"],"install":[{"cmd":"npm install graphql-playground-react","lang":"bash","label":"npm"},{"cmd":"yarn add graphql-playground-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphql-playground-react","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The main component is a default export. Named export does not exist.","wrong":"import { Playground } from 'graphql-playground-react'","symbol":"Playground (default)","correct":"import Playground from 'graphql-playground-react'"},{"note":"In CommonJS, use .default because the package is ESM-first with a default export.","wrong":"const Playground = require('graphql-playground-react')","symbol":"Playground (require)","correct":"const Playground = require('graphql-playground-react').default"},{"note":"Server middlewares are named exports per framework (express, hapi, koa, lambda).","wrong":"import playground from 'graphql-playground-middleware-express'","symbol":"Middleware (Express example)","correct":"import { express as playground } from 'graphql-playground-middleware-express'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Playground from 'graphql-playground-react';\n\nconst App = () => (\n  <Playground\n    endpoint={process.env.GRAPHQL_ENDPOINT ?? 'https://api.example.com/graphql'}\n    subscriptionEndpoint={process.env.GRAPHQL_SUBSCRIPTION_ENDPOINT ?? 'wss://api.example.com/graphql'}\n    setTitle={true}\n  />\n);\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"typescript","description":"Renders a GraphQL Playground React component with endpoint and subscriptionEndpoint configured via environment variables."},"warnings":[{"fix":"Upgrade React to version 16 or higher.","message":"React 16 or higher is required. React 15 is not supported and will not work.","severity":"breaking","affected_versions":"<16.0"},{"fix":"Replace import from 'graphql-playground' with 'graphql-playground-react'.","message":"The graphql-playground package (without -react) is deprecated. Use graphql-playground-react instead.","severity":"deprecated","affected_versions":">=1.0"},{"fix":"Use import Playground from 'graphql-playground-react'.","message":"Do not use named import { Playground } - only default export exists.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"search_vec":"'1.7.28':38 'app':65 'avail':59 'built':46 'cadenc':43 'column':19 'compon':51,63 'configur':32 'current':34 'desktop':64 'develop':11 'document':20 'experi':56 'express':70 'featur':14 'graphiql':50 'graphql':1,3,8,24 'hapi':71 'header':31 'histori':27 'http':30 'ide':9 'interact':16 'javascript':75 'koa':72 'lambda':74 'like':15 'middlewar':68 'moder':41 'multi':18 'multi-column':17 'offer':13 'playground':2,4 'power':7 'provid':53 'queri':26 'react':62 'real':22 'real-tim':21 'releas':42 'richer':55 'server':67 'stabl':35 'subscript':25 'tab':28 'time':23 'top':48 'typescript':76 'version':36 'workflow':12","created_at":"2026-06-07T16:54:00.538208+00:00","updated_at":"2026-06-07T16:54:00.538208+00:00","problems":[{"fix":"Run 'npm install graphql-playground-react' or 'yarn add graphql-playground-react'.","cause":"Package not installed or incorrect package name.","error":"Module not found: Can't resolve 'graphql-playground-react'"},{"fix":"Change to 'import Playground from 'graphql-playground-react''.","cause":"Using named import instead of default import.","error":"Attempted import error: 'Playground' is not exported from 'graphql-playground-react'"},{"fix":"Ensure 'import React from 'react'' is present in the file.","cause":"React is not installed or imported in the file using GraphQL Playground.","error":"Uncaught ReferenceError: React is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/graphcool/graphql-playground#readme","github":"ssh://git@github.com/graphcool/graphql-playground","docs":null,"changelog":null,"pypi":null,"npm":"graphql-playground-react","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}