GraphQL Playground on the Backend with Node

GraphQL Playground on the Front with React

You can add GraphQL Playground as a module to your backend project, as a server middleware. To use the GraphQL Playground on the backend with Node, you can use express, hapi, koa or lambda.

To use Graphql Playground Middleware Express:

yarn add graphql-playground-middleware-express
npm install graphql-playground-middleware-express --save

To use Graphql Playground Middleware Koa:

yarn add graphql-playground-middleware-koa
npm install graphql-playground-middleware-koa --save

To use Graphql Playground Middleware Hapi:

arn add graphql-playground-middleware-hapi
npm install graphql-playground-middleware-hapi --save

NOTE: Graphql Playground Middleware Hapi 2.0.0 version requires hapi 17, for hapi 16, you can use the 1.3.6 version.

To use Graphql Playground Middleware Lambda:

yarn add graphql-playground-middleware-lambda
npm install graphql-playground-middleware-lambda --save

Security Information

Earlier versions of them have some security issues, if you can’t upgrade the newer version, you can fix the security issue with a security solution, one of the suggested way is by using xss for XSS reflection. For express, all versions before 1.7.16 are vulnerable, so you can upgrade to 1.6.12 or later. For Koa, all versions before 1.6.15 are vulnerable, so you can use the 1.6.15 or newer versions. For Hapi, all versions before 1.6.13 are vulnerable, so you can use the 1.6.13 or newer versions. For lambda, all versions of graphql-playground-middleware-lambda before 1.7.17 have XSS reflection vulnerability, so you can use the 1.7.17 or newer versions.

As Serverless Handler

With the serverless framework, you can build applications on a cloud service, like AWS Lambda. There is a YAML file to deploy both your code and cloud infrastructure and supports many languages. To work with a serverless framework, you can use the Graphql Playground Middleware Lambda.

Example of GraphQL Playground on the Backend with Node

In this example, we will use express to use GraphQL Playground as a module for a simple backend project.

To start type in cmd:

mkdir graphql-playground-express-proj
cd graphql-playground-express-proj
npx express-generator
npm i

Then type in cmd:

npm install graphql-playground-middleware-express --save

Then paste this to app.js file:

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

app.use('/', expressPlayground({ endpoint: 'https://swapi-graphql.netlify.app/.netlify/functions/index' }))

module.exports = app;

Then, in cmd:

npm start

When you go to localhost:3000, you will be able to see the application.
The example app