GraphQL Playground on the Backend with Node
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
GraphQL Playground
GraphQL Playground is a powerful GraphQL IDE which is a graphical, interactive, and in-browser, that enables development workflows and increases developer productivity. It is a form of user interface that visualizes your GraphQL queries and requests. It allows you to get data by a request to the URL you have provided, understand the response of the query you’ve written, and use many features to ease your job related to GraphQL requests other than just writing GraphQL queries. These features will be told in this article later.