Graphql With React

  1. Home
  2. React
  3. Graphql With React

Tags: React

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

Last updated 2022-01-10 | 4.6

- 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

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

* 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.

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 objects
  • Learn the process of combining a backend server with a front end React
  • Master the process of thinking about your applications data in terms of a graph structure
  • Grasp the difference between GraphQL, Apollo, and Relay, and when to use each
  • Develop apps that are unique, fun, and responsive.
  • Build servers that can be used with both React and React Native applications
  • Master handling authentication with GraphQL
  • Learn 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.

Who this course is for:

  • Programmers looking to learn GraphQL

Course content

15 sections • 116 lectures

Why GraphQL? 3 lectures

Introduction Preview 02:35

Course Resources Preview 00:10

Join Our Community! Preview 00:07

A REST-ful Routing Primer 2 lectures

Review of REST-ful Routing Preview 05:29

Shortcomings of RESTful Routing Preview 10:16

On To GraphQL 12 lectures

What is GraphQL? Preview 07:23

Working with GraphQL Preview 06:02

Registering GraphQL with Express Preview 06:38

GraphQL Schemas Preview 04:09

Writing a GraphQL Schema Preview 06:52

Root Queries Preview 06:31

Resolving with Data Preview 06:29

The GraphiQL Tool Preview 08:54

A Realistic Data Source Preview 08:53

Async Resolve Functions Preview 09:36

Nodemon Hookup Preview 02:10

Company Definitions Preview 05:10

Fetching Data with Queries 12 lectures

Nested Queries Preview 03:48

More on Nested Queries Preview 08:01

A Quick Breather Preview 04:32

Multiple RootQuery Entry Points Preview 04:41

Bidirectional Relations Preview 03:12

More on Bidirectional Relations Preview 04:14

Resolving Circular References Preview 05:51

Query Fragments Preview 07:03

Introduction to Mutations Preview 07:24

NonNull Fields and Mutations Preview 08:41

Do It Yourself - Delete Mutation! Preview 09:09

Do It Yourself - Edit Mutation! Preview 13:23

The GraphQL Ecosystem 2 lectures

GraphQL Clients - Apollo vs Relay Preview 13:05

Sidenote - Apollo Server vs GraphQL Server Preview 05:45

Clientside GraphQL 9 lectures

The Next App Preview 03:40

Starter Pack Walkthrough Preview 06:30

MongoDB Atlas Setup and Configuration Preview 02:18

MongoLab Setup Preview 09:05

Working Through the Schema Preview 09:45

Apollo Client Setup Preview 10:15

React Component Design Preview 07:36

GQL Queries in React Preview 07:48

Bonding Queries with Components Preview 08:19

Gotchas with Queries in React 5 lectures

Handling Pending Queries Preview 07:57

Fixing Key Warnings Preview 04:11

Architecture Review Preview 04:04

Adding React Router Preview 07:24

Creating a Song Preview 09:47

Frontend Mutations 9 lectures

Mutations in React Preview 07:55

Query Params Preview 11:29

Defining Query Variables in React Preview 08:25

Navigating on Successful Mutation Preview 09:46

Troubleshooting List Fetching Preview 08:31

Refetching Queries Preview 09:45

Deletion by Mutation Preview 06:53

Associating Mutations with a Component Preview 04:35

Invoking Delete Mutations Preview 09:07

Automatic Data Caching 4 lectures

Refetching a Query Preview 05:44

A Quick CSS Breather Preview 03:06

Showing a Particular Song Preview 06:00

Fetching Individual Records Preview 09:37

React Router + GraphQL 11 lectures

Integrating React Router with GraphQL Preview 15:34

Watching for Data Preview 04:32

Navigating Between Screens Preview 03:59

Lyric Creation Form Preview 03:10

The CreateLyric Mutation Preview 10:59

Submitting Mutations Preview 08:38

Showing a List of Lyrics Preview 03:26

Enhancing Queries Preview 07:35

Identifying Records Preview 09:47

Caching with DataIdFromObject Preview 09:04

Thumbs Up Icon Preview 03:57

More on Client Side Mutations 7 lectures

The Like Mutation Preview 06:04

Showing Likes with Lyrics Preview 04:04

Fetching Likes Preview 05:31

Optimistic UI Updates Preview 04:55

Handling Optimistic Responses Preview 06:56

A Quick Bugfix Preview 02:19

Application Wrapup Preview 05:36

Building From (Mostly) Scratch 12 lectures

App Overview Preview 04:13

App Challenges Preview 07:05

Boilerplate Setup Preview 07:45

Authentication Approach Preview 13:02

MLab Setup Preview 03:28

The User Type Preview 07:13

The Signup Mutation Preview 09:14

Delegating to the Auth Service Preview 07:09

Testing Signup Preview 07:47

The Logout Mutation Preview 06:27

The Login Mutation Preview 06:30

Checking Authentication Status Preview 06:00

Moving Client Side 17 lectures

Client Side Setup Preview 08:11

Root Routes with React Router Preview 08:30

Figuring Out the Current User Preview 10:31

Including Cookies with GraphQL Requests Preview 09:25

Authentication State Preview 07:07

Login and Logout Buttons Preview 06:53

Handling the Logout Mutation Preview 07:46

Automatic Component Rerenders Preview 06:10

Login Form Design Preview 05:02

The Auth Form Preview 09:52

Importing the Login Mutation Preview 06:51

Submitting the Auth Form Preview 07:40

Refreshing the Current User Preview 03:49

Error Handling with GraphQL Preview 08:29

More on Error Handling Preview 10:45

The Signup Mutation Preview 08:50

More on the Signup Mutation Preview 06:27

Handling Errors Gracefully 10 lectures

Handling Errors Around Signup Preview 06:11

Race Conditions - A Big Gotcha Preview 09:44

Finalized Auth Flow Preview 06:23

Fixing the Login Process Preview 13:02

Fix Signup Too! Preview 05:08

The Dashboard Route Preview 03:24

The Need for a HOC Preview 03:05

Getting Started with RequireAuth Preview 08:17

Applying RequireAuth Preview 05:02

Fixing RequireAuth Preview 06:14

Extras 1 lectures

Bonus! Preview 00:25