Registry / testing / graphql-playground-middleware-express

graphql-playground-middleware-express

library1.7.23jsnpmunverified

Express middleware that exposes the GraphQL Playground IDE (an interactive GraphQL client with introspection, subscriptions, and documentation) as a route in your Express server. Current stable version is 1.7.23, with infrequent releases. Key differentiator: more feature-rich than GraphiQL, offering subscription support, theming, and collapsible docs. Alternatives: graphiql-express, altair-express. Note: versions before 1.7.16 had a security vulnerability when passing unsanitized user input to expressPlayground().

testing

npm install graphql-playground-middleware-express

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHQL-PLAYGROUND

graphql-playground-middleware-express

testingjavascriptv1.7.23

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.

expressPlayground

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

✗ const expressPlayground = require('graphql-playground-middleware-express')

The default export is the middleware factory. CommonJS require needs .default access for correct usage.

expressPlayground (CommonJS)

✓ const expressPlayground = require('graphql-playground-middleware-express').default

✗ const expressPlayground = require('graphql-playground-middleware-express')

Without .default, the import will be the module object, causing a runtime error.

Express middleware integration

✓ app.get('/playground', expressPlayground({ endpoint: '/graphql' }))

✗ app.use('/playground', expressPlayground({ endpoint: '/graphql' }))

Use app.get (or app.post) instead of app.use to avoid double invocation and correct routing behavior.

Shows how to set up a GraphQL Playground route at /playground with a GraphQL endpoint at /graphql using CommonJS.

const express = require('express'); const expressPlayground = require('graphql-playground-middleware-express').default; const app = express(); app.get('/playground', expressPlayground({ endpoint: '/graphql' })); app.listen(4000, () => console.log('GraphQL Playground at http://localhost:4000/playground'));

Debug

Known issues

breakingSecurity vulnerability in versions <1.7.16: unsanitized user input to expressPlayground() leads to XSS.

fix

Upgrade to >=1.7.16. If unable to upgrade, sanitize user input before passing to expressPlayground().

affects: <1.7.16

deprecatedPackage is in maintenance mode; no active development. Consider migrating to modern alternatives like graphiql or altair.

fix

Evaluate alternatives such as @graphiql/toolkit or altair-express for ongoing support.

affects: >=1.0.0

gotchaThe default export is not the middleware itself but a factory function that must be called with options.

fix

Always call expressPlayground({ ... }) to generate middleware.

affects: >=1.0.0

gotchaWhen using CommonJS require, you must use .default or the import will be the module object, not the function.

fix

Use require('graphql-playground-middleware-express').default or switch to ESM import.

affects: >=1.0.0

Errors

Common errors & fixes

Error: expressPlayground is not a function

Using CommonJS require without .default, importing the module object instead of the default export.

fix

Replace require('graphql-playground-middleware-express') with require('graphql-playground-middleware-express').default.

TypeError: Cannot read properties of undefined (reading 'filePath')

Using expressPlayground() without calling it as a function, e.g., passing it directly as middleware.

fix

Ensure you call expressPlayground({ endpoint: ... }) to produce middleware.

Cannot find module 'graphql-playground-middleware-express'

Package not installed or installed in a different directory.

fix

Run 'npm install graphql-playground-middleware-express' in your project root.

Upgrade

Version history

1.7.23latest on npm

Audit

Dependencies

expressoptionalPeer dependency required for the middleware to function

Agent activity

8 hits · last 30 days

node

Resources

githubssh://git@github.com/graphcool/graphql-playground ↗

packagegraphql-playground-middleware-express ↗

homepagehttps://github.com/graphcool/graphql-playground/tree/main/packages/graphql-playground-middleware-express ↗