Intermediate Gatsby, v2

Jason Lengstorf

Jason Lengstorf

Learn With Jason
3 hours, 54 minutes CC
Intermediate Gatsby, v2

Course Description

The baseline setup in Gatsby will take you far, but in any complex web app, you’ll end up needing to go beyond the defaults. This course will teach you how to leverage Gatsby’s APIs to handle advanced use cases like handling custom data and dynamic pages, client-only routes and protected routes, and customizing Gatsby’s schema and GraphQL API data. You’ll even learn to use serverless functions to add new superpowers to Gatsby!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: September 23, 2021

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 26 minutes
  • Introduction
    Jason Lengstorf introduces the course by providing some personal background, briefly discusses Jamstack architecture, course resources, and an overview of the material that will be covered in this course. Gatsby is built on ReactJS and GraphQL, is opinionated on file structure, has a focus on faster load times, and is a great option to build static websites fast.
  • Course Code Setup
    Jason discusses which requisite pieces are needed for the course repo including GitHub, GitHub CLI, Netlify, Netlify CLI, and Yarn. A walkthrough of the contents of course repository files and scripts is also provided in this segment.
  • Monorepo & Deployment Setup
    Jason walks through setting up the course monorepo package.json, installing dependencies, linking the monorepo to Netlify, and starting a development environment on local host. A student's question regarding if Gatsby will recursively detect which dependencies need to be installed, is also covered in this segment.

Understanding Gatsby APIs

Section Duration: 49 minutes
  • Add Custom Pages
    Jason demonstrates how to build custom pages by using a special gatsby-node.js folder, which holds and exports functions, and the Node API createPages action createPage. The custom page template takes in the pageContext prop as an argument and passes over the custom set data from the context field of createPage.
  • Add Custom Data
    Jason walks through adding custom data to Gatsby's GraphQL layer by using the sourceNodes API to pull in data from objects set in a .json file. The basic Gatsby node structure and how to determine if the node has changed is also covered in this segment.
  • Create Data Relationships
    Jason demonstrates how to create relationships between two Gatsby nodes by writing GraphQL schema to be used by createTypes API. Creating custom relationships between Gatsby nodes allows for the creation of more specific GraphQL queries.
  • Create Custom Resolvers for Data Types
    Jason live codes custom resolvers using Gatsby's createResolver API to define a new field on the Book type, then use some of the data each book contains to build a custom buy link. A resolver in GraphQL is a function that returns data for a given field.
  • Handle Remote Images
    Jason demonstrates how to handle image optimization from custom data that has images from external URLs by using node-fetch and gatsby-source-filesystem. Gatsby can pull in and optimize external images at build time by creating what's called a "remote file node".

Working With Custom Data

Section Duration: 36 minutes

Build Custom Themes

Section Duration: 34 minutes
  • Setting Up Gatsby Theme Development
    Jason provides a brief recap of the project's progress so far, discusses what a Gatsby theme is, and live codes creating and connecting a Gatsby theme. Gatsby themes can extend the gatsby config to allow for adding plugins, provide components that can wrap, shared styles, and assist in creating foundations for use in multiple websites.
  • Create a Layout
    Jason live codes building custom layout styling, global styles, and a scoped module for the layout. Implementing the layout styling, how to automatically wrap the layout on every page, and how to pull in the layout as a plugin is also covered in this segment.
  • Add a Shared Nav Component
    Jason walks through creating a configurable shared navigation component by using the site metadata section of gatsby-config.js. Adding styling to the navigation bar and importing the navigation component are also covered in this segment.
  • Configure a Gatsby Theme & File Shadowing
    Jason demonstrates how to customize the nav items in the shared nav theme by adding them to the site's gatsby-config.js site metadata and the concept of file shadowing. Gatsby supports a concept called "shadowing" which gives the ability to selectively override any file in a theme from within the site.

App-Like Features of Gatsby

Section Duration: 53 minutes
  • Client-Only Routes & Dynamic Pages
    Jason live codes building a search component with dynamically generated content, a catch-all dynamic route, and a client-only fallback route. A catch-all dynamic route will cause every URL that starts with the folder name to be routed to this component.
  • Serverless Function Setup
    Jason discusses and briefly demonstrates Gatsby's built-in support for serverless functions which allow the ability to quickly write small chunks of server-like functionality that can run safely as if it were running on a server.
  • Auth Serverless Function
    Jason walks through building three small serverless functions to fake logging in and out of the Gatsby app by setting cookies values accordingly. Setting cookies for a user's logged in status can help keep sessions alive and avoid sending requests to authentication servers.
  • Protected Pages
    Jason live codes how to use serverless functions to create protected routes, building a login page, account dashboard, and client-only catch all route. Using the previous built auth management with serverless functions to demonstrate the ability to protect routes based on auth status in Gatsby is also covered in this segment.


Section Duration: 28 minutes
  • Course Recap
    Jason provides a general recap of the material covered so far in the course. A student's question regarding why Jason organized the data pull plugin as it is in the Gatsby project is also covered in this segment.
  • Deploying a Dynamic Site to Netlify
    Jason walks through adding proper build configuration to the netlify.toml, adding the Gatsby Netlify plugin, and deploying the site using the Netlify CLI. Brief discussion of some of the processes involved when Netlify is deploying the site is also covered in this segment.
  • Managing Environment Variables
    Jason demonstrates how to manage environment variables in Gatsby and expands on the benefits of using serverless functions. Client-side code can't see all environment variables, it can only see those prefixed with GATSBY_, this is a security measure so sensitive variables are not accidentally used in client-side code.

Wrapping Up

Section Duration: 4 minutes
  • Wrapping Up
    Jason wraps up the course by providing some next steps into Gatsby and encouraging students to build and ship more Gatsby sites. Student questions regarding limits to the processing of a serverless function and how serverless functions effect build time are also answered in this segment.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now