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 request custom data in Gatsby in order to later source it for your application. We'll walk through configuring a sourceNodes export in gatsby-node.js and using the node-fetch package to request a list of Pokemon from the PokeAPI.

[PokeAPI](https://pokeapi.co/)

Lecturer: [0:00] We're going to start off with a new Gatsby site. This site was created using Gatsby starter Sass. Currently, all the content for this page is static. What if we wanted to make a request to an API and add our own? To do this, Gatsby provides an API for creating nodes. Particularly, we're going to source these nodes.

[0:16] The first thing we want to do if we don't have the file is create a new file in call it gatsby-node.js. This file will live in the top of your project directory. To get started in our Gatsby node file, we want to first create an exports.sourceNodes. We're going to set that equal to be an async function.

[0:32] At this point, just test it out. We can console.log('hello world!'). If we run our build script, we can see that it output, "Hello world."

[0:39] Since we need data, the first thing I want to do is have a tool to actually make that request. We're going to use a package called node-fetch that basically brings the window fetch option from the browser to node. To start, we can add that package. Once it's complete, we can require it at the top of our file.

[0:54] To test this out, we're going to use the PokéAPI. This API provides a REST endpoint where we can get any attributes for a Pokémon or all of the Pokémon.

[1:02] We're going to replace our console.log with const response. We're going to set that equal to await fetch() and that Pokémon API URL. Then we're going to grab the JSON of that by using await response.json().

[1:16] At this point, let's console.log out that JSON just to see that that request actually worked. If we run yarn build again, we can see that we're now successfully making that request and logging out that JSON.

[1:26] Since this API only returns the name and the URL for that specific Pokémon, we want to go through and grab all of those Pokémon. First, we're going to destructure the results with a default value of an empty of array from our JSON. Next, we're going to create a new constant of pokemon, and we're going to set that equal to await, and a Promise of all, which will create an array of promises.

[1:47] To do that, we're going to use our results, and we're going to create a map on it where we're going to create an async function that passes in result as an argument, where we can then destructure the URL from the result where we want to make a new request. We'll say const pokeResponse. We'll set that equal to await fetch() and that URL.

[2:06] With that response, we want to return await pokeResponse.json(). Now, if we console.log out our pokemon, we can run our build command. Now we can see that we're getting a full response from all of our Pokémon.

[2:19] In review, we're going to use Gastby's sourceNodes API in order to hook into the build. In order to make the request for our custom data, we're going to use the fetch API using node-fetch. First, we make a fetch request to the PokéAPI. Once we have all of our results, we map through them and grab each individual Pokémon. Finally, when we run our build command, we successfully get all of our Pokémon.

Course

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

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

Share this video with your friends