DEV Community

Cover image for Replace Graphiql With Graphql Playground Using These Simple Steps
Sahil Jain
Sahil Jain

Posted on • Originally published at webbrainsmedia.com

2 2

Replace Graphiql With Graphql Playground Using These Simple Steps

Original Post Link => https://webbrainsmedia.com/blogs/replace-graphiql-with-graphql-playground

Graphiql is the default IDE for working with Graphql API in Gatsby. But Gatsby also support, newer and more featured IDE known as Graphql Playground. Graphql Playground provides us with additional features like a nice fully customizable UI interface, multiple tab options, detailed docs drawer, copy CURL option etc. These features makes building queries easy and fun.
So, lets see how we can swap Graphiql for Graphql Playground.

Steps To Replace Graphiql To Graphql Playground:

1) Install dotenv dependency

For replacing the IDE we need to declare an environment variable and for that environment variable to load in process.env we need to use an dotenv package. You can install it by running this command.

npm install dotenv
Enter fullscreen mode Exit fullscreen mode

2) Define the environment variable

For gatsby to know that we want to use Graphql Playground we need to define an environment variable GATSBY_GRAPHQL_IDE=playground. We can define this variable in an .env file. Its a best practice to seperate environment variables for development and production. So, we can define the env files in our root folder like this .env.development and .env.production.

├── node_modules
├── public
├── src
├── static
├── .env.development
├── .env.production
Enter fullscreen mode Exit fullscreen mode

Now, In the .env.development file define this key value pair.

--------------------
||.env.development||
--------------------
GATSBY_GRAPHQL_IDE=playground
Enter fullscreen mode Exit fullscreen mode

3) Update gatsby-config.js

Inside your gatsby-config.js file at the very top require the dotenv plugin and provide the path to the appropriate .env file.

--------------------
||gatsby-config.js||
--------------------
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: {
Enter fullscreen mode Exit fullscreen mode

Now when you run gatby develop. it will set the NODE_ENV to development, and the dotenv package will load the environment variables defined in .env.development file.

Finally, go to http://localhost:8000/___graphql and use the newer and nicer Graphql Playground IDE.

Original Post Link => https://webbrainsmedia.com/blogs/replace-graphiql-with-graphql-playground

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more