Introducing GraphiQL

In this guide, you’ll be learning to use something called GraphiQL, a tool that helps you structure GraphQL queries correctly.

What is GraphiQL?

GraphiQL is the GraphQL integrated development environment (IDE). It’s a powerful (and all-around awesome) tool you’ll use often while building Gatsby websites.

You can access it when your site’s development server is running—normally at http://localhost:8000/___graphql.

Example of using GraphiQL

When you have http://localhost:8000/___graphql open, it will look something like what this video shows. In the video below, watch someone poke around the built-in Site “type” and see what fields are available on it—including the siteMetadata object.

How to use GraphiQL

When the development server is running for one of your Gatsby sites, open GraphiQL at http://localhost:8000/___graphql and play with your data! Press Ctrl + Space (or use Shift + Space as an alternate keyboard shortcut) to bring up the autocomplete window and Ctrl + Enter to run the GraphQL query.

Make sure to check out the GraphiQL docs in the upper right-hand corner of the IDE. It’s easy to miss them, but they’re worth visiting!

Using the GraphiQL Explorer

The GraphiQL Explorer enables you to interactively construct full queries by clicking through available fields and inputs without the repetitive process of typing these queries out by hand.

Video hosted on egghead.io.

Read more about the GraphiQL Explorer on the Gatsby blog.

Other resources

• See Tutorial Part 5: Source Plugins for a more complete example of using GraphiQL
• See the README for GraphiQL
• See Using GraphQL Playground for another example of a GraphQL IDE