Back to Home

Setting up the graphql playground for Gatsby projects

GraphQl playground is an alternative solution to the GraphiQL and so far in my opinion, I think it’s much easier and beautiful to work with coupled with it’s nice user interface.

So let’s dive down explaining the Graphiql and the Graphql playground. The graphiql is the default IDE to work with the graphql Api on Gatsby but alternatively Gatsby have the support for another IDE called the GraphQl playground which have more nicer interface and feature sets on it. It is fine if you don’t want to use the graphql playground, maybe you are already getting use to the graphiql environment but I must say if you are working a bigger application with that will require setting much using the graphql API, you have to try using the Graphql playground.

Okay, enough of long talk. Let’s get started on how you can actually set the environment variable on our machine, don’t worry about OS compatibility because we will be setting it up in an OS compatible way. 1. Open your project directory on the text editor (in my case, I will be using the Visual studio code to do this)


2. Create a new file in your src folder and call it .env.development or .env and then add the below code



3. install the env-cmd package using the

npm install --save-dev env-cmd

PS: we used –dev here because we are using this only in the development.

4. Go to your package.json file and add

“env-cmd .env.development Gatsby develop”

Or alternatively "env-cmd –f .env.development Gatsby develop"


So, try use the first one but if that do not work out then the second one should work perfectly.

Then save this file and run the npm run develop in your terminal (let’s make sure everything load along, after this go to your browser and the type Localhost:8000/graphql and you will be presented with the beautiful graphql playground. Cheers, and enjoy.


Published 01 Aug 2019