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.

Setting up GraphQL Playground

You have many options for setting up GraphQL Playground. You may set the GraphQL Playground up to use as a desktop application, use it as a module like a react component to a front-end project or a middleware server to a back-end project, or you may use it online by using any of its online demos.

There are several options to set the GraphQL Playground up to use as a desktop application, depending on your preferences and operating system. For Linux, you can install a snap or deb package from the GitHub release page of the project and run it to set the GraphQL Playground up as a desktop application. For Windows, you can install the exe package and run it. There are options for MacOS as well.

For MacOS, you can use brew to install by a command line on the terminal and set the GraphQL Playground up as a desktop application by running this command

brew install --cask graphql-playground

For setting the GraphQL Playground up to use as a front end or back end module will be told in detail in this article, in GraphQL Playground on the front with React and in GraphQL Playground on the backend with Node.

Most of its online demos, like graphqlbin, is out of use now, but there are other demos which are still in the use. One of them is provided here which you have chance to see the GraphQL Playground, some of its features and how it works

Features of GraphQL Playground

The GraphQL Playground is based on GraphiQL. It has a lot of features with the features of GraphiQL. GraphQL has query history feature means that GraphQL queries in GraphQL Playground are kept under query history and you can view query history with the history button.

Also in GraphQL Playground you can configure query variables in query variables tab or HTTP headers in HTTP headers tab, they are placed on the bottom of the GraphQL Playground tab.

You may use multiple tabs in GraphQL Playground for GraphQL queries, even with different endpoint. Prettify settings and query history will be shared with new tabs. These tabs are like the tabs in your browser, you can visit different website in different tabs but settings will be same for each tab.

In GraphQL Playground, you can set an endpoint or copy, use prettify button to prettify your GraphQL queries, view history with history button, change the Settings property, set a query variable under the query variable tab to use the variable in the query, set HTTP headers to configure HTTP headers when you need to, show query schema and add new tab. Schema is helpful when you are writing GraphQL queries, it shows the variables as a GraphQL Schema or shows a Schema documentation, where you can display variables in detail by expanding.

A GraphQL Playground Application

The History button, as in the picture near the prettify button, is to view previous GraphQL queries. You may also view starred GraphQL queries or search a GraphQL query in your GraphQL query history other than just viewing previous GraphQL queries.

A GraphQL query history

In Query Variables you can set a variable to a GraphQL query. You should add your query variable and then use it in your GraphQL query. Query Variables should be written in JSON. In HTTP Headers, you can configure the HTTP header in JSON as you need in order to make a request, like you may set cookie or send authorization with HTTP header.

Using Query Variable

You may change the GraphQL Playground settings in the Settings. You can change the editor properties, prettify properties, request properties, schema pooling properties and tracing properties. You can change editor properties such as font family or font size. You can change prettify properties to be able to view your GraphQL queries as you set up in the Settings. You can change your request properties, like its credentials. You can set request credentials to “omit” to not to send nor receive credentials, to “include” to send user credentials like cookies, to “same-origin” to send user credentials to the server URL that is on the same origin. Schema properties is for the Schema which is automatically fetched from the endpoint, that is used in the query. This is only needed when you want to override the Schema.

GraphQL Playground as a HTML Page

To use GraphQL Playground as a html page, you can simply render the Playground HTML in a simple html page or in a html page with full loading animation by a CDN. You can add the GraphQL Playground to your html file by adding

<link href=" https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.28/build/static/css/index.min.css " rel="stylesheet"> 

or a script link

<script src="https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react@1.7.42/build/static/js/middleware.min.js"></script>

inside the head of your html file.

GraphQL Playground on the Front with React

You may add GraphQL Playground to a front end application by GraphQL Playground React component. To use GraphQL Playground as a react component, you should use the graphql-playground-react. You may add configurations like endpoint as a GraphQL Playground React component props, you can set subscription endpoint by setting subscriptionEndpoint, set setTitle to true if you want to reflect the current endpoint in the page title, and set GraphQL configuration with the graphqlConfig component and in case you provide a GraphQL configuration, you can set your workspace to workspaceName.

A GraphQL Playground react component requires React 16, and also requires to be wrapped up in the code.

NOTE:Earlier versions of 1.7.28 has security issues, like ensuring that user-generated HTML is safe, so use the version of graphql-playground-react 1.7.28 or later.

Example of GraphQL Playground with React

You need react installed on your computer for this example.

In cmd, type following line by line to create a react project

mkdir graphql-playground-react-project
cd graphql-playground-react-project
npx create-react-app .

Now you have a graphql-playground-react-project react project. As it has been mentioned before, the GraphQL Playground requires React 16, so we will install react 16 and react-dom 16.

In cmd, type

npm install --save react@16.14.0 react-dom@16.14.0 

Now we will download graphql-playground-react to use the GraphQL Playground react component.

In cmd, type

npm i graphql-playground-react

Since we installed React 16, we should make some changes on index.js and we should add a GraphQL Playground react component in app.js.

Open index.js in src folder of your application, and paste this code:

import React from 'react';
import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render( 
    <App /> ,
  document.body,
);

Open app.js in src folder of your application, and paste this code:

import { Playground, store } from 'graphql-playground-react';
import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
       <Playground endpoint=“https://api.graph.cool/simple/v1/swapi”>
    </Provider>
  );
}
export default App;

In here, we used a <Provider> component from Redux to wrap GraphqL Plaground React component up.

Open index.html in public folder of your application, and paste this code inside the head tag:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700" rel="stylesheet" /

It will give buffer error.

In cmd, type

npm install --save buffer

To start the application

In cmd, type

npm start 

Now you have a basic application that uses the GraphQL Playground as a React component.

The example app

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

Conclusion

GraphQL Playground is one of GraphQL IDE that is a graphical user interface and provides a lot of features. You can use GraphQL Playground as a desktop app, as a basic HTML page, as a front end module, as a back end module or as online demo. You can configure settings and use tabs to execute graphql queries, and use many features that are told in this article.

If you want to work on GraphQL queries with different tabs and helping tools like viewing the Schema, GraphQL Playground is a great IDE for you.