GraphQL with React: The Complete Developers Guide

Learn and master GraphQL by building real web apps with React and Node

  • Stephen Grider
  • 4.26
  • (9473 reviews)
  • 13 hrs
  • 116 lectures
  • Udemy
GraphQL with React: The Complete Developers Guide

What you will 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

Your trainer

Stephen Grider

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

116 lessons

Easy to follow lectures and videos covering subject details.

13 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Why GraphQL?02:53

  • Introduction02:35
  • Course Resources00:10
  • Join Our Community!00:07

  • Review of REST-ful Routing05:29
  • Shortcomings of RESTful Routing10:16

  • What is GraphQL?07:23
  • Working with GraphQL06:02
  • Registering GraphQL with Express06:38
  • GraphQL Schemas04:09
  • Writing a GraphQL Schema06:52
  • Root Queries06:31
  • Resolving with Data06:29
  • The GraphiQL Tool08:54
  • A Realistic Data Source08:53
  • Async Resolve Functions09:36
  • Nodemon Hookup02:10
  • Company Definitions05:10

  • Nested Queries03:48
  • More on Nested Queries08:01
  • A Quick Breather04:32
  • Multiple RootQuery Entry Points04:41
  • Bidirectional Relations03:12
  • More on Bidirectional Relations04:14
  • Resolving Circular References05:51
  • Query Fragments07:03
  • Introduction to Mutations07:24
  • NonNull Fields and Mutations08:41
  • Do It Yourself - Delete Mutation!09:09
  • Do It Yourself - Edit Mutation!13:23

  • GraphQL Clients - Apollo vs Relay13:05
  • Sidenote - Apollo Server vs GraphQL Server05:45

  • The Next App03:40
  • Starter Pack Walkthrough06:30
  • MongoDB Atlas Setup and Configuration02:18
  • MongoLab Setup09:05
  • Working Through the Schema09:45
  • Apollo Client Setup10:15
  • React Component Design07:36
  • GQL Queries in React07:48
  • Bonding Queries with Components08:19

  • Handling Pending Queries07:57
  • Fixing Key Warnings04:11
  • Architecture Review04:04
  • Adding React Router07:24
  • Creating a Song09:47

  • Mutations in React07:55
  • Query Params11:29
  • Defining Query Variables in React08:25
  • Navigating on Successful Mutation09:46
  • Troubleshooting List Fetching08:31
  • Refetching Queries09:45
  • Deletion by Mutation06:53
  • Associating Mutations with a Component04:35
  • Invoking Delete Mutations09:07

  • Refetching a Query05:44
  • A Quick CSS Breather03:06
  • Showing a Particular Song06:00
  • Fetching Individual Records09:37

  • Integrating React Router with GraphQL15:34
  • Watching for Data04:32
  • Navigating Between Screens03:59
  • Lyric Creation Form03:10
  • The CreateLyric Mutation10:59
  • Submitting Mutations08:38
  • Showing a List of Lyrics03:26
  • Enhancing Queries07:35
  • Identifying Records09:47
  • Caching with DataIdFromObject09:04
  • Thumbs Up Icon03:57

  • The Like Mutation06:04
  • Showing Likes with Lyrics04:04
  • Fetching Likes05:31
  • Optimistic UI Updates04:55
  • Handling Optimistic Responses06:56
  • A Quick Bugfix02:19
  • Application Wrapup05:36

  • App Overview04:13
  • App Challenges07:05
  • Boilerplate Setup07:45
  • Authentication Approach13:02
  • MLab Setup03:28
  • The User Type07:13
  • The Signup Mutation09:14
  • Delegating to the Auth Service07:09
  • Testing Signup07:47
  • The Logout Mutation06:27
  • The Login Mutation06:30
  • Checking Authentication Status06:00

  • Client Side Setup08:11
  • Root Routes with React Router08:30
  • Figuring Out the Current User10:31
  • Including Cookies with GraphQL Requests09:25
  • Authentication State07:07
  • Login and Logout Buttons06:53
  • Handling the Logout Mutation07:46
  • Automatic Component Rerenders06:10
  • Login Form Design05:02
  • The Auth Form09:52
  • Importing the Login Mutation06:51
  • Submitting the Auth Form07:40
  • Refreshing the Current User03:49
  • Error Handling with GraphQL08:29
  • More on Error Handling10:45
  • The Signup Mutation08:50
  • More on the Signup Mutation06:27

  • Handling Errors Around Signup06:11
  • Race Conditions - A Big Gotcha09:44
  • Finalized Auth Flow06:23
  • Fixing the Login Process13:02
  • Fix Signup Too!05:08
  • The Dashboard Route03:24
  • The Need for a HOC03:05
  • Getting Started with RequireAuth08:17
  • Applying RequireAuth05:02
  • Fixing RequireAuth06:14

  • Bonus!00:29
Enroll now
Online Courses

Learning React doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of React related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free React video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more