Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex
Offered By: egghead.io
Course Description
Overview
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 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.
Syllabus
- 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
Taught by
Colby Fayock
Related Courses
30 Days to Learn LaravelLaracasts 3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn Accessibility Audit
Amazon Web Services via AWS Skill Builder Expanding Your JS Skills with Angular
A Cloud Guru