Build a GraphQL Query using Gatsby’s GraphiQL Explorer

Amberley Romo
InstructorAmberley Romo

Share this video with your friends

Send Tweet
Published 2 years ago
Updated 10 months ago

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.