In this guide, you’ll be learning to use something called GraphiQL, a tool that helps you structure GraphQL queries correctly.
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
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
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!
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.
- 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