Build a GraphQL Query using Gatsby’s GraphiQL Explorer

Automatically Create Pages in Gatsby

Use the Gatsby Theme Workspace Starter to Begin Building a New Theme

Linking Between Pages in Gatsby

Gatsby Docs

When building Gatsby sites, you'll very likely be building GraphQL queries. graphiql-explorer is a plugin for GraphiQL that enables you to interactively explore and build GraphQL queries. It enables you to construct full queries by clicking through available fields and inputs without the repetitive process of typing these queries out by hand!

This video will teach you:
- How to access the GraphiQL Explorer
- How to build a query using the GraphiQL Explorer

Instructor: [00:00] In this example, gatsby-config file, we have a site title defined with the value of "Hello, World!" here in the siteMetadata object. I'm already running this Gatsby site in development mode, which provides a link to GraphiQL. I'll open that up and check out the explorer pane here on the left.

[00:17] To build a query for site title, we'll click Site, Site Metadata, and then Site Title. We'll click the Play button to execute the query. The query is returning what we want, the site title, with a value of "Hello, World!" This query is ready to copy and use in our project.

Course

Gatsby Docs

Build a GraphQL Query using Gatsby’s GraphiQL Explorer

Share this video with your friends