GraphQL with React: The
Complete Developers Guide
What Will I Learn?
Build amazing single page applications with React JS and GraphQL
Master fundamental concepts behind structuring GraphQL servers
Realize the power of building flexible data schemas
Be the engineer who explains how GraphQL works to everyone else, because
you know the fundamentals so well
Become fluent in the ecosystem supporting GraphQL, including the differences
between Apollo and Relay
Curriculum For This Course
Collapse All
114 Lectures
13:14:35
–
Why GraphQL?
02:40
Introduction
Preview02:35
Links to Completed Code
00:05
–
A REST-ful Routing Primer
15:45
Review of REST-ful Routing
05:29
Shortcomings of RESTful Routing
10:16
–
On To GraphQL
01:18:47
What is GraphQL?
Preview07:23
Working with GraphQL
06:02
Registering GraphQL with Express
06:38
GraphQL Schemas
04:09
Writing a GraphQL Schema
06:52
Root Queries
06:31
Resolving with Data
Preview06:29
The GraphiQL Tool
08:54
A Realistic Data Source
08:53
Async Resolve Functions
Preview09:36
Nodemon Hookup
02:10
Company Definitions
05:10
–
Fetching Data with Queries
01:19:59
Nested Queries
03:48
More on Nested Queries
08:01
A Quick Breather
04:32
Multiple RootQuery Entry Points
Preview04:41
Bidirectional Relations
03:12
More on Bidirectional Relations
04:14
Resolving Circular References
05:51
Query Fragments
07:03
Introduction to Mutations
07:24
NonNull Fields and Mutations
08:41
Do It Yourself - Delete Mutation!
09:09
Do It Yourself - Edit Mutation!
13:23
–
The GraphQL Ecosystem
18:50
GraphQL Clients - Apollo vs Relay
13:05
Sidenote - Apollo Server vs GraphQL Server
05:45
–
Clientside GraphQL
01:02:58
The Next App
03:40
Starter Pack Walkthrough
06:30
MongoLab Setup
09:05
Working Through the Schema
09:45
Apollo Client Setup
10:15
React Component Design
07:36
GQL Queries in React
07:48
Bonding Queries with Components
08:19
–
Gotchas with Queries in React
33:23
Handling Pending Queries
07:57
Fixing Key Warnings
04:11
Architecture Review
04:04
Adding React Router
07:24
Creating a Song
09:47
–
Frontend Mutations
01:16:26
Mutations in React
07:55
Query Params
11:29
Defining Query Variables in React
08:25
Navigating on Successful Mutation
09:46
Troubleshooting List Fetching
08:31
Refetching Queries
09:45
Deletion by Mutation
06:53
Associating Mutations with a Component
04:35
Invoking Delete Mutations
09:07
–
Automatic Data Caching
24:27
Refetching a Query
05:44
A Quick CSS Breather
03:06
Showing a Particular Song
06:00
Fetching Individual Records
09:37
–
React Router + GraphQL
01:20:41
Integrating React Router with GraphQL
15:34
Watching for Data
04:32
Navigating Between Screens
03:59
Lyric Creation Form
03:10
The CreateLyric Mutation
10:59
Submitting Mutations
08:38
Showing a List of Lyrics
03:26
Enhancing Queries
07:35
Identifying Records
09:47
Caching with DataIdFromObject
09:04
Thumbs Up Icon
03:57
-
More on Client Side Mutations
35:25
The Like Mutation
06:04
Showing Likes with Lyrics
04:04
Fetching Likes
05:31
Optimistic UI Updates
04:55
Handling Optimistic Responses
06:56
A Quick Bugfix
02:19
Application Wrapup
05:36
-
Building From (Mostly) Scratch
01:25:53
App Overview
04:13
App Challenges
07:05
Boilerplate Setup
07:45
Authentication Approach
13:02
MLab Setup
03:28
The User Type
07:13
The Signup Mutation
09:14
Delegating to the Auth Service
07:09
Testing Signup
07:47
The Logout Mutation
06:27
The Login Mutation
06:30
Checking Authentication Status
06:00
-
Moving Client Side
02:12:18
Client Side Setup
08:11
Root Routes with React Router
08:30
Figuring Out the Current User
10:31
Including Cookies with GraphQL Requests
09:25
Authentication State
07:07
Login and Logout Buttons
06:53
Handling the Logout Mutation
07:46
Automatic Component Rerenders
06:10
Login Form Design
05:02
The Auth Form
09:52
Importing the Login Mutation
06:51
Submitting the Auth Form
07:40
Refreshing the Current User
03:49
Error Handling with GraphQL
08:29
More on Error Handling
10:45
The Signup Mutation
08:50
More on the Signup Mutation
06:27
-
Handling Errors Gracefully
01:07:17
Handling Errors Around Signup
06:11
Race Conditions - A Big Gotcha
09:44
Finalized Auth Flow
06:23
Fixing the Login Process
13:02
Fix Signup Too!
05:08
The Dashboard Route
03:24
The Need for a HOC
03:05
Getting Started with RequireAuth
08:17
Applying RequireAuth
05:02
Fixing RequireAuth
06:14
Bonus!
00:47
Requirements
Familiarity with React
Description
Note: This course assumes you are familiar with React!
If you're tired of spinning your wheels trying to figure out what type of backend server
to use, this is the course for you.
Authentication? You will learn it. Apollo Data? Included. Integration with React? Of
course!
This course will get you up and running with GraphQL quickly, and teach you the core
knowledge you need to deeply understand and build React applications quickly.
