Name: Create and Source Custom Nodes from Data in Gatsby with createNode
Uploaded: 2020-07-09T21:15:06-05:00
Description: In this lesson, you'll learn how to create custom nodes in Gatsby sourced from data from the PokeAPI. We'll walk through making Gatsby's API available through createNode and how to use it to make our data available to query in GraphQL.

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 create custom nodes in Gatsby sourced from data from the PokeAPI. We'll walk through making Gatsby's API available through createNode and how to use it to make our data available to query in GraphQL. 

https://app.egghead.io/api/v1/lessons/gatsby-create-and-source-custom-nodes-from-data-in-gatsby-with-createnode/subtitles

Colby Fayock: [0:00] We're going to start off with a new Gatsby site using Gatsby Sass Starter. Our [inaudible] is currently made up of static data. In order to create our own data, we're using Gatsby's API of sourceNodes and fetching data from the pokeapi. We're also grabbing the data for each individual Pokémon.

[0:15] In order to make this data available to Gatsby, we're going to use the createNode API. To do this, we're going to use createNode function. We're going to pass in our data, an id, and some other metadata to make sure Gatsby understands what we're sending them.

[0:27] To get started, we're going to destructure our actions object from our sourceNodes arguments. From those actions, we're going to destructure our createNode function.

[0:36] Next, we want to create a node for each of our Pokemon. We're going to say pokemon.forEach. In that forEach, we're going to use the arguments node and index and create our function. Then we can add createNode. We'll just pass an empty object for now.

[0:51] To test this out, we can run yarn build. We can see that our code is running, but we're getting an error because it fails validation.

[0:57] Going back to our node, the first thing we're going to do is pass in all the data from our actual node, then we're going to create an id. To do this, we're going to use a function called createNodeId(). We can make this function available by destructuring it from our sourceNodes arguments.

[1:10] As part of that createNodeId, we're going to need to pass in a string to represent each node. To start we're going to give this node type a name. We're going to create a new const NODE_TYPE = 'Pokemon'.

[1:22] Then inside of our createNodeId function, we're going to create a template literal pattern and we're going to add that {NODE_TYPE} with a hyphen to separate and then we're going to add the {node.id}. This node.id comes from each Pokemon since each Pokemon ultimately has an id property.

[1:36] In addition to the node data and the id, we're going to also add a parent of null. We're going to specify children, with an empty array. We're going to define an internal property, where we're going to specify a type, and we're going to use our same NODE_TYPE. Content, which will be the content of our node, we'll use JSON.stringify(node).

[1:56] Finally, we'll create a contentDigest, where we're going to use a function called createContentDigest(), which we can also make available as an argument where we'll pass in our node again, because we're creating a contentDigest of our node. Now, we can run yarn build again, and we don't get any errors.

[2:11] To see that we definitely made this work, we can run yarn develop, where we can spin up a GraphQL explorer. Once we open the explorer in the browser, we can see that we can navigate to allPokemon, edges, node. Where just for testing purposes, we can select the name and hit play, and we see all of our Pokemon.

[2:29] In review, we took all the data that we were grabbing from the pokemon API, and we created a node for each Pokemon. To do this, we destructured some arguments like the actions where we got the createNode function, and we also got the createNodeId, and createContentDigest function.

[2:44] With those, we were able to properly configure our node, our id, and all of the internals, where we were able to build and open up a GraphQL explorer and see all of our Pokemon data.

Create and Source Custom Nodes from Data in Gatsby with createNode

Share this video with your friends

Course

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