Jason Lengstorf
Learn With Jason
Intermediate Gatsby, v2
3 hours, 54 minutes CC
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.
Preview
CloseCourse Details
Published: September 23, 2021
Topics
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
Table of Contents
Introduction
Section Duration: 26 minutes
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.
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.
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
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.
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.
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.
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.
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
Jason walks through using Gatsby's file-based routing and the helper package slugify to automatically create pages with custom data. A student's question regarding how to add the page slug as a property in the GraphQL tree is also covered in this segment.
Jason demonstrates manually creating pages using the createPages API and custom logic, adding styling in a CSS module, and creating the page template for the createPages API. Gatsby being able to run APIs synchronously or asynchronously by simply omitting or including the async keyword is also discussed in this segment.
Build Custom Themes
Section Duration: 34 minutes
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.
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.
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.
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
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.
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.
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.
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.
Deployment
Section Duration: 28 minutes
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.
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.
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
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