GraphQL is a popular and widely used query language that bills itself as an alternative to the REST approach. One of the reasons why GraphQL is so well-regarded in the developer community is its thriving ecosystem. There are so many tools that make learning and using GraphQL easier. One of these tools is GraphQL Playground, a GraphQL integrated developer environment (IDE) that helps improve development workflows.

In this guide, I’ll introduce you to GraphQL Playground and walk you through some basic concepts to help you make the most of your GraphQL development experience.

Let’s dive in!

What is GraphQL Playground?

GraphQL Playground is a GraphQL IDE created and maintained by Prisma. It’s built on top of GraphiQL with additional features such as automatic schema reloading, support for GraphQL subscriptions, the ability to configure HTTP headers, and more.

GraphQL Playground ships with basic features such as syntax highlighting, intelligent type ahead of fields, real-time error highlighting and reporting for queries and variables, documentation explorer, search, markdown support, and so much more.

Setting up GraphQL Playground

GraphQL Playground extremely flexible. It can be used as a desktop app on your computer, a module on your front- or backend project, or online with the web version. We’ll dive into each use case below.

Installing as a desktop app

The GraphQL Playground desktop app needs to be installed on your computer. If you’re using Windows, you can download it directly. If you’re using Mac or Linux, you can install it by running the following command on the terminal.

    brew cask install graphql-playground

Installing as a module on your project

GraphQL Playground can also be used as an npm module on your project. Installing the package will enable you to interact with your GraphQL API during development. Later, we’ll demonstrate how to add it as a component on a React app or as middleware on a Node project.

Add GraphQL Playground to your project by executing the following command.

    yarn add graphql-playground

Or, if you’re using npm:

    npm install graphql-playground

Using the web version

There are differences between the desktop app and the web version. The online version of GraphQL Playground does not enable double-clicking on the files with the .graphql extension. The web version is accessible online, and there’s also a way to share your local GraphQL Playground as an online version.

Features

For this tutorial, we’ll use this GraphQL server to interact with the GitHub API. Here is the endpoint: https://7sgx4.sse.codesandbox.io/

Run a GraphQL query

You can send a GraphQL query or mutation using GraphQL Playground. The latter has an autocompletion feature and helps you ride through your schema.

As you can see, GraphQL Playground helps in sending requests to the GraphQL server and facilitates the retrieval of data as well.

Query with variables

GraphQL Playground can be used like GraphiQL to send queries with variables.

Here, we use the “QUERY VARIABLES” tab to add the variable username, pass it as a parameter to the GraphQL query, and use it to fetch data.

#graphql #database #web-development #developer