Introducing GraphQL Playground

GraphQL is a powerful technology that is revolutionising the way how APIs are designed. Besides its expressiveness when fetching data from a server, another key strength of GraphQL is the tooling ecosystem around it.

Today, we are excited to introduce a new tool: GraphQL Playground

⚠️ This article is outdated!. graphql-playground is joining forces with GraphiQL. ⚠️

Overview

If you have worked with Prisma before, chances are you have also already seen an earlier version of the Playground, which you can access directly through our web-based Console.

We’re now going one step further and are making the Playground a standalone application that you can run locally on your machine.

Here are some of its core features:

• Share your Playground on GraphQL Bin
• Improved API documentation
• Code generation, e.g. for Apollo Client
• Access your history of queries and mutations
• Integrates with graphql-config and the graphql-cli

How is this different compared to GraphiQL?

The GraphQL Playground is built on top of GraphiQL —so at the core you can expect similar functionality. However, the Playground offers a lot more features to enable better development workflows!

One of GraphiQL’s most loved features is the out-of-the-box support for accessing the documentation of a GraphQL API. Yet it can be a pain to navigate back and forth inside the single column of GraphiQL’s UI, especially when you’re working with deeply nested types. The Playground now lets you navigate your API documentation a lot more smoothly, using multiple columns, and supporting keyboard-based navigation.

You can browse your API documentation in multiple columns and using the keyboard.

Another issue, particularly in projects with multiple developers, can be that schema changes are introduced while you’re running a GraphiQL session — this will break your queries. To prevent this, the GraphQL Playground features an** automatic schema reload** that’s triggered on any change to your API.

The Playground also ships with other features like support for GraphQL subscriptions, using **multiple tabs **to better organise your queries and mutations, color themes,** **or exploring your **query history.**

Sharing your Playgrounds using GraphQL Bin

To improve collaboration in GraphQL projects, we also added the ability for you to easily share a Playground with your fellow developers on GraphQL Bin. (Think about it like Pastebin for GraphQL queries.)

You can share your GraphQL queries (including endpoints & configuration) by sending other a GraphQL Bin link.

This is a great way to enhance debugging workflows across your team or enable other developers to easily play around with your GraphQL API.

Here is an example bin: https://graphqlbin.com/RVIn

Embed in your GraphQL Server

Another great feature of the GraphQL Playground is that it allows you to embed it into your own applications, either as a React component in your frontend app or on the server-side as middleware for frameworks such as Express, Hapi or Koa. Here is what the setup for Express looks like:

Get Involved — Roadmap & Upcoming Features

The GraphQL Playground is a great addition to the toolbox of every GraphQL developer. To give you a glimpse what’s added next, here are some upcoming features:

• Context-aware (history/query-based) autocompletion
• An integrated Graph View based on GraphQL Voyager

GraphQL Playground is open-source and available on GitHub. We’d love to hear your feedback, ideas and contributions to improve it even further. 💚