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.