GraphQL Playground - The Better GraphiQL?

Benefits and setup of GraphQL Playground

Tl,dr: GraphQL Playground adds some neat features on top of the well known GraphiQL project. Some highlights are tabs, improved schema exploration and the possibility to add customs headers. Adding it to a GraphQL server is a pretty straightforward process.

Lately I’m becoming more and more of a GraphQL fan. That’s an API specification having many benefits over classical REST approaches, like avoiding over- and underfetching. One of the things I like most, are the great tools which are created in it’s ecosystem. You can find many of them referenced in this awesome list. A very helpful tool is GraphiQL, which allows you to easily write and execute querys against your GraphQL server with features like autocompletion, history support and schema exploration.

In september 2017, the team of graph.cool released a open sourced tool called GraphQL Playground. It builds upon the idea of GraphiQL, but adds some nice functionality on top.

The coolest features it has over GraphiQL:

• Tabs!
• Nice themes
• Multi-column schema explorer
• Custom header UI, usable for auth tokens etc.
• Improved Query history
• GraphQL subscription support (I did not try that out yet)

Honestly, the first time I stumpled upon GraphQL Playground, was when I tried out graph.cool last summer. They integrate the Playground as part of their web UI to build GraphQL services. At that time, at least for me, the Playground crashed from time to time with weird UI flaws. Recently I looked for an easy way to add custom headers to GraphiQl for authentication. The now open sourced GraphQL Playground enabled that. Integrating the Playground to an existing GraphQL server was fairly easy and most of the previously experienced problems seemed to have been fixed (I still have a bug with not closing the suggestions popover on tab switching). Having said that, the graph.cool team told me they are still working on making the Playground more stable.

There is still room for improvement, on my wishlist would be an easy way to close individual schema columns.

_{^{A boy having fun on a swing! Little pun on the name playground. Photo by Myles Tan on Unsplash.}}

That sounds all nice and neat, so what are our options for trying GraphQL playground out?

Well, there is a standalone desktop app and a hosted online version, which you can point to any GraphQL server via an URL setting. If you want to give GraphQL Playground a shot right now, go ahead and open the web version, it’s as simple as that.

Another options is to add the Playground directly to your server. You could add it as a React Component, which sounds pretty involving, or add it as a middleware to many server frameworks (as of now, there is support for express, hapi, koa and lambda). You can check the details, but the gist for express is this:

import express from 'express';
import { graphqlExpress } from 'graphql-server-express';
import expressPlayground from 'graphql-playground-middleware-express';

const server = express();

// ...
// get executable schema to graphqlSchema as usual

// setup graphql-server-express
server.use(
  '/graphql',
  // other (graphql) middleware,
  graphqlExpress(graphqlSchema),
);

// express playground middleware setup, querying '/graphql' route from above
server.use('/playground', expressPlayground({ endpoint: '/graphql' }));

// ...
// listen server as usual

All over all, I’m pretty happy with GraphQL Playground right now and plan to use it for my GraphQL projects in the foreseeable future. Would be nice to hear your thoughts or experiences below.