GraphQL with React The Complete Developers Guide

Learn and master GraphQL by building real web apps with React and Node
GraphQL with React The Complete Developers Guide
File Size :
5.86 GB
Total length :
13h 16m



Stephen Grider


Last update

Last updated 12/2022



GraphQL with React The Complete Developers Guide

What you’ll 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

GraphQL with React The Complete Developers Guide


Familiarity with React


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.
Both OSX and Windows supported.
We’ll start by mastering the fundamentals of GraphQL, including data types, schemas, and integration with Express and React. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing.  Special attention has been paid to creating code that you’ll be able to make use of on your own fantastic projects.
If you are new to GraphQL, or if you’ve been working to learn it but sometimes feel like you still don’t quite ‘get it’, this is the GraphQL course for you! To learn GraphQL you have to understand it.
Learn how to use GraphQL’s schema to define relations between your data objectsLearn the process of combining a backend server with a front end ReactMaster the process of thinking about your applications data in terms of a graph structureGrasp the difference between GraphQL, Apollo, and Relay, and when to use eachDevelop apps that are unique, fun, and responsive.Build servers that can be used with both React and React Native applicationsMaster handling authentication with GraphQLLearn the core principles of navigation with React Router and GraphQL
I’ve built the course that I would have wanted to take when I was learning GraphQL. A course that explains the concepts and how they’re implemented in the best order for you to learn and deeply understand them.


Section 1: Why GraphQL?

Lecture 1 Introduction

Lecture 2 Course Resources

Lecture 3 Join Our Community!

Section 2: A REST-ful Routing Primer

Lecture 4 Review of REST-ful Routing

Lecture 5 Shortcomings of RESTful Routing

Section 3: On To GraphQL

Lecture 6 What is GraphQL?

Lecture 7 Working with GraphQL

Lecture 8 Registering GraphQL with Express

Lecture 9 GraphQL Schemas

Lecture 10 Writing a GraphQL Schema

Lecture 11 Root Queries

Lecture 12 Resolving with Data

Lecture 13 The GraphiQL Tool

Lecture 14 A Realistic Data Source

Lecture 15 Async Resolve Functions

Lecture 16 Nodemon Hookup

Lecture 17 Company Definitions

Section 4: Fetching Data with Queries

Lecture 18 Nested Queries

Lecture 19 More on Nested Queries

Lecture 20 A Quick Breather

Lecture 21 Multiple RootQuery Entry Points

Lecture 22 Bidirectional Relations

Lecture 23 More on Bidirectional Relations

Lecture 24 Resolving Circular References

Lecture 25 Query Fragments

Lecture 26 Introduction to Mutations

Lecture 27 NonNull Fields and Mutations

Lecture 28 Do It Yourself – Delete Mutation!

Lecture 29 Do It Yourself – Edit Mutation!

Section 5: The GraphQL Ecosystem

Lecture 30 GraphQL Clients – Apollo vs Relay

Lecture 31 Sidenote – Apollo Server vs GraphQL Server

Section 6: Clientside GraphQL

Lecture 32 The Next App

Lecture 33 Starter Pack Walkthrough

Lecture 34 MongoDB Atlas Setup and Configuration

Lecture 35 MongoLab Setup

Lecture 36 Working Through the Schema

Lecture 37 Apollo Client Setup

Lecture 38 React Component Design

Lecture 39 GQL Queries in React

Lecture 40 Bonding Queries with Components

Section 7: Gotchas with Queries in React

Lecture 41 Handling Pending Queries

Lecture 42 Fixing Key Warnings

Lecture 43 Architecture Review

Lecture 44 Adding React Router

Lecture 45 Creating a Song

Section 8: Frontend Mutations

Lecture 46 Mutations in React

Lecture 47 Query Params

Lecture 48 Defining Query Variables in React

Lecture 49 Navigating on Successful Mutation

Lecture 50 Troubleshooting List Fetching

Lecture 51 Refetching Queries

Lecture 52 Deletion by Mutation

Lecture 53 Associating Mutations with a Component

Lecture 54 Invoking Delete Mutations

Section 9: Automatic Data Caching

Lecture 55 Refetching a Query

Lecture 56 A Quick CSS Breather

Lecture 57 Showing a Particular Song

Lecture 58 Fetching Individual Records

Section 10: React Router + GraphQL

Lecture 59 Integrating React Router with GraphQL

Lecture 60 Watching for Data

Lecture 61 Navigating Between Screens

Lecture 62 Lyric Creation Form

Lecture 63 The CreateLyric Mutation

Lecture 64 Submitting Mutations

Lecture 65 Showing a List of Lyrics

Lecture 66 Enhancing Queries

Lecture 67 Identifying Records

Lecture 68 Caching with DataIdFromObject

Lecture 69 Thumbs Up Icon

Section 11: More on Client Side Mutations

Lecture 70 The Like Mutation

Lecture 71 Showing Likes with Lyrics

Lecture 72 Fetching Likes

Lecture 73 Optimistic UI Updates

Lecture 74 Handling Optimistic Responses

Lecture 75 A Quick Bugfix

Lecture 76 Application Wrapup

Section 12: Building From (Mostly) Scratch

Lecture 77 App Overview

Lecture 78 App Challenges

Lecture 79 Boilerplate Setup

Lecture 80 Authentication Approach

Lecture 81 MLab Setup

Lecture 82 The User Type

Lecture 83 The Signup Mutation

Lecture 84 Delegating to the Auth Service

Lecture 85 Testing Signup

Lecture 86 The Logout Mutation

Lecture 87 The Login Mutation

Lecture 88 Checking Authentication Status

Section 13: Moving Client Side

Lecture 89 Client Side Setup

Lecture 90 Root Routes with React Router

Lecture 91 Figuring Out the Current User

Lecture 92 Including Cookies with GraphQL Requests

Lecture 93 Authentication State

Lecture 94 Login and Logout Buttons

Lecture 95 Handling the Logout Mutation

Lecture 96 Automatic Component Rerenders

Lecture 97 Login Form Design

Lecture 98 The Auth Form

Lecture 99 Importing the Login Mutation

Lecture 100 Submitting the Auth Form

Lecture 101 Refreshing the Current User

Lecture 102 Error Handling with GraphQL

Lecture 103 More on Error Handling

Lecture 104 The Signup Mutation

Lecture 105 More on the Signup Mutation

Section 14: Handling Errors Gracefully

Lecture 106 Handling Errors Around Signup

Lecture 107 Race Conditions – A Big Gotcha

Lecture 108 Finalized Auth Flow

Lecture 109 Fixing the Login Process

Lecture 110 Fix Signup Too!

Lecture 111 The Dashboard Route

Lecture 112 The Need for a HOC

Lecture 113 Getting Started with RequireAuth

Lecture 114 Applying RequireAuth

Lecture 115 Fixing RequireAuth

Section 15: Extras

Lecture 116 Bonus!

Programmers looking to learn GraphQL

Course Information:

Udemy | English | 13h 16m | 5.86 GB
Created by: Stephen Grider

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top