There are currently no items in your shopping cart.

User Panel

Forgot your password?.

GraphQL with React: The Complete Developers Guide

Video Introducing this tutorial

Why GraphQL? :
Links to Completed Code

A REST-ful Routing Primer :
Review of REST-ful Routing
Shortcomings of RESTful Routing

On To GraphQL :
What is GraphQL?
Working with GraphQL
Registering GraphQL with Express
GraphQL Schemas
Writing a GraphQL Schema
Root Queries
Resolving with Data
The GraphiQL Tool
A Realistic Data Source
Async Resolve Functions
Nodemon Hookup
Company Definitions

Fetching Data with Queries :
Nested Queries
More on Nested Queries
A Quick Breather
Multiple RootQuery Entry Points
Bidirectional Relations
More on Bidirectional Relations
Resolving Circular References
Query Fragments
Introduction to Mutations
NonNull Fields and Mutations
Do It Yourself - Delete Mutation!
Do It Yourself - Edit Mutation!

The GraphQL Ecosystem :
GraphQL Clients - Apollo vs Relay
Sidenote - Apollo Server vs GraphQL Server

Clientside GraphQL :
The Next App
Starter Pack Walkthrough
MongoLab Setup
Working Through the Schema
Apollo Client Setup
React Component Design
GQL Queries in React
Bonding Queries with Components

Gotchas with Queries in React :
Handling Pending Queries
Fixing Key Warnings
Architecture Review
Adding React Router
Creating a Song

Frontend Mutations :
Mutations in React
Query Params
Defining Query Variables in React
Navigating on Successful Mutation
Troubleshooting List Fetching
Refetching Queries
Deletion by Mutation
Associating Mutations with a Component
Invoking Delete Mutations

Automatic Data Caching :
Refetching a Query
A Quick CSS Breather
Showing a Particular Song
Fetching Individual Records

React Router + GraphQL :
Integrating React Router with GraphQL
Watching for Data
Navigating Between Screens
Lyric Creation Form
The CreateLyric Mutation
Submitting Mutations
Showing a List of Lyrics
Enhancing Queries
Identifying Records
Caching with DataIdFromObject
Thumbs Up Icon

More on Client Side Mutations :
The Like Mutation
Showing Likes with Lyrics
Fetching Likes
Optimistic UI Updates
Handling Optimistic Responses
A Quick Bugfix
Application Wrapup

Building From (Mostly) Scratch :
App Overview
App Challenges
Boilerplate Setup
Authentication Approach
MLab Setup
The User Type
The Signup Mutation
Delegating to the Auth Service
Testing Signup
The Logout Mutation
The Login Mutation
Checking Authentication Status

Moving Client Side :
Client Side Setup
Root Routes with React Router
Figuring Out the Current User
Including Cookies with GraphQL Requests
Authentication State
Login and Logout Buttons
Handling the Logout Mutation
Automatic Component Rerenders
Login Form Design
The Auth Form
Importing the Login Mutation
Submitting the Auth Form
Refreshing the Current User
Error Handling with GraphQL
More on Error Handling
The Signup Mutation
More on the Signup Mutation

Handling Errors Gracefully :
Handling Errors Around Signup
Race Conditions - A Big Gotcha
Finalized Auth Flow
Fixing the Login Process
Fix Signup Too!
The Dashboard Route
The Need for a HOC
Getting Started with RequireAuth
Applying RequireAuth
Fixing RequireAuth