The GraphiQL Explorer

Introduction to GraphiQL explorer

Writing queries to fetch data using GraphiQL can be a bit complicated. In Gatsby, knowing the structure of our data and the names of the fields and subfields can be challenging too. Therefore, to make this task of fetching data easier, Gatsby provides us with GraphiQL explorer.

GraphiQL is an integrated development environment (IDE) that lets us write queries by visualizing available fields and subfields. We can just select fields, subfields, and inputs with the interactive explorer by clicking on drop-down menu options. Doing so generates the query string that we can easily copy and paste into our code.

When we run the code in the widget at the end of the lesson, we are greeted with the screen shown below.

Note: If we want to open GraphiQL on a local server, we need to start our development server if it’s not already running and visit localhost:8000/__graphiql.