Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

The Gatsby ecosystem supports a ton of plugins that allow you to easily source data from a variety of sources like a GraphQL CMS or Wordpress. But what if you wanted to source your own custom data?

In this collection, we'll walk through learning how to source custom data and create nodes in Gatsby in order to build out a Pokedex using the PokeAPI. We'll learn how to request the data in Gatsby's build process, create nodes with that data, query that data, and use it to create a Pokemon Pokedex UI.

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/)

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

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. 

Create and Source Custom Nodes from Data in Gatsby with createNode

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.

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

In this lesson, we'll walk through using Gatsby's useStaticQuery React Hook to request data that we custom sourced from the PokeAPI. We'll copy over a GraphQL query from our GraphQL explorer, clean up the data, and use it to populate Pokemon in our app.

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

In this lesson, we'll create a new custom React Hook that we'll use to make a GraphQL query to request data that we custom sourced from the PokeAPI. We'll walk through migrating our useStateQuery Gatsby hook to our new custom hook, configuring our output of the custom hook, and using it to access our custom sourced data.

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

In this lesson, we'll walk through turning a list of Pokemon into a grid using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). We'll start by using the grid display property, setting up static and dynamic columns, and using the gap feature to configure spacing in our grid.

Create a Grid Layout of List Items Using CSS Grid Templates

In this lesson, we'll learn how to use [CSS Clip Path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) to add a notch to our grid layout. We'll walk through understanding how the clip-path property works, applying a polygon clip path, and using it to create a notch effect like the real Pokedex.

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

Colby Fayock

Course Content