Gatsby
Up and Running with Gatsby: Working with Data

GraphiQL Explorer

PRO

An introduction to your new best friend: the GraphiQL Explorer.

We've got a title, description, and author in a siteMetadata object in gatsby-config.js.

Go ahead and run gatsby develop. You should see a link to the GraphiQL explorer in the output, which is usually localhost:8000/___graphql.

GraphiQL lets us visually explore the data in our Gatsby site and build queries. It has three panes: an explorer, a query editor, and an output pane.

You can see the data we added by expanding site and then siteMetadata and then clicking the big button to run the query. Cool, huh?

Let's use this query somewhere in our site.