Todd Matheson

toddmath.com web dev blog

Upgrading Gatsby.js Development with GraphQL Playground

2019-06-09 Todd Mathesontutorials

If you’ve ever spent time developing with Gatsby.js, you know how easy querying the GraphQL backend is, using the GraphiQL url at http://localhost:8000/__graphql. Anytime you run gatsby develop, it serves this nice, yet outdated IDE. Thankfully, it’s super easy to upgrade to the newer, and much improved IDE, GraphQL Playground.

First, you need to create a simple environment file at the root of you’re Gatsby.js project. We’ll name this .env.development

Inside you’re root directory:

touch .env.development

Easy enough. Now open you’re favorite text editor and load the new file. Inside we’ll put a single key=value pair, instructing Gatsby to use our new IDE, each time you start up the dev server.

Inside .env.development:

GATSBY_GRAPHQL_IDE=playground

That’s it 😄. I love it when improvements are easy, fast, and most of all enhance your development experiance. Now you can enjoy multiple tabs and a much more intuitive doc section inside you’re new GraphQL IDE.