Request Data from a Custom API Endpoint to Source Nodes in Gatsby with gatsby-node.js

Create and Source Custom Nodes from Data in Gatsby with createNode

Use Gatsby’s GraphQL Explorer GraphiQL to Query and Browse Your Custom Sourced Data

Use Gatsby’s useStaticQuery React Hook to Query Custom Sourced Data for a Web App

Create a Custom React Hook Using Gatsby’s useStaticQuery to Query Custom Sourced Data

Create a Grid Layout of List Items Using CSS Grid Templates

Add a Cutout Notch to an HTML Element with a CSS Polygon Clip Path

Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex

In this lesson, you'll learn how to use Gatsby's GraphQL explorer GraphiQL in order to query your data. We'll walk through starting up the Gatsby development server which starts up GraphiQL and how to use it to make a basic query, explore custom Pokemon data sourced in Gatsby, and generate a code snippet of that query to use in our app.

Lecturer: [0:00] We're going to start off with a Gatsby site that we spun-up with Gatsby Sass starter. We wanted to create some custom data. We reached out to the PokéAPI and created nodes for each Pokémon.

[0:08] When developing with Gatsby, it provides a GraphQL explorer where we can query and test our data. Where here, we're able to query all Pokémon and see the name of each Pokémon. When sourcing data with Gatsby, it relies on GraphQL in order to query that data.

[0:22] Since we'll need each of these nodes inside of our actual code, we can come up with the query inside of the Explorer. For instance, here we're grabbing the name, but what if we also need the id? Over in the sidebar, we can select that id, hit play, and we can now see all of our id's.

[0:36] We could do that with any property that GraphQL is making available since we sourced those nodes. If we wanted to see how tall the Pokémon is, we can select the height. If we wanted to see the species of the Pokémon, we can select species, and then select name, which we can then click play, see our species and the height.

[0:52] This Explorer is great for a few reasons. First of all, we're able to make these queries real time. We also get a lot of options for using those queries. If we wanted to use that in the code, we can go up to Code Exporter where we can select it, and we could automatically see a query where we can use it in our code.

[1:07] If we prefer to set a query hook, we can select this drop down, change it, and we can see it using the hook. The explorer also provides a nice way to see the documentation of those particular nodes. If I wanted to see more information about each Pokémon, I can select node, and I can select this type of Pokémon, where I can now see all these fields and information about those fields.

[1:26] Finally, we get some options like Prettify, which is helpful for mainly writing our queries or history, where we can see the past queries we made. In review, we were sourcing nodes that we queried using the PokéAPI.

[1:37] Using Gatsby, we were able to spin up a GraphQL explorer. In that Explorer, we have a bunch of options like being able to write queries where we can look at our data. We can also construct those queries to easily copy and paste it into our code. If we want to learn more about our data types, we can open it up using the documentation where we can see our types.

Course

Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex

Use Gatsby’s GraphQL Explorer GraphiQL to Query and Browse Your Custom Sourced Data

Share this video with your friends