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
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!