Udemy

Platform

English

Language

Other

Category

React Query: Server State Management in React

Mastering queries, mutations, integration with auth, testing and more!

4.85 (53 reviews)

Students

7.5 hours

Content

Jul 2021

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

React Query queries, mutations, and cache control

Using React Query for pagination, infinite scroll, and optimistic updates

Integrating React Query with Authentication

Testing React Query


Description

React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to keep your app up-to-date with data on the server.

In fact, if you are using Redux simply to manage data from the server, React Query can replace Redux in your app. And, for server data management, React Query is much simpler and more powerful than Redux. For example, React Query: 

  • tracks loading and error states for your server queries (no need to manage that yourself!)

  • makes cached server data available for display while you're fetching updated data

This course starts with a simple app to learn the basics of React Query

  • queries

  • loading and error states

  • React Query dev tools

  • pagination and pre-fetching

  • mutations

Then we take a detour with the Star Wars API to learn about Infinite Queries (getting more data just as the user has gotten near the end of the current data).

Finally, we work on a large, multi-component app to learn about the above in more detail, plus

  • centralizing loading and error handling

  • filtering data

  • integrating React Query with auth

  • ways to keep data up to date after mutations, including optimistic updates

  • testing React Query

Other notable course features:

  • pre-written projects to use as a backdrop for React Query, so there's no time wasted writing code not relevant to the course

  • ample opportunities to practice with periodic "code quizzes" to make sure you're understanding the concepts

  • visual models for complicated concepts to help understand all of the moving pieces

  • the major project is written in TypeScript

  • supportive instructor who loves engaging with students in Q&A

Come see what the hype is about, and improve your apps with simpler, more powerful server state management!


Screenshots

React Query: Server State Management in React
React Query: Server State Management in React
React Query: Server State Management in React
React Query: Server State Management in React

Content

Creating Queries and Loading / Error states

Introduction to React Query

Introduction to this Course

First project: Blog-em Ipsum

Creating Queries with useQuery

Handling Loading and Error States

React Query Dev Tools

staleTime vs cacheTime

Pagination, Pre-fetching and Mutations

Intro to Code Quizzes

Code Quiz! Create Query for Blog Comments

Query Keys

Pagination

Pre-fetching Data

isLoading vs isFetching

Intro to Mutations

Delete Post with useMutation

Code Quiz! Mutation to Update Post Title

Summary: React Query Basics

Infinite Queries for Loading Data "Just in Time"

Introduction to Infinite Scroll

Code Quiz! Set up Infinite SWAPI for React Query

Intro to useInfiniteQuery

Infinite Scroll Diagram

Write useInfiniteQuery Call

InfiniteScroll Component

useInfiniteQuery Fetching and Error states

Code Quiz! Infinite Species

Summary: Infinite Scroll

React Query in Larger App: Setup, Centralization, Custom Hooks

Intro to Lazy Days Spa App

Lazy Days Spa App Code Orientation

Install and set up React Query

Custom Query Hook: useTreatments

Fallback Data

Centralized Fetching indicator with useIsFetching

onError Handler for useQuery

onError Default for Query Client

Code Quiz! Custom Hook for useStaff

Query Features I: Pre-Fetching and Pagination

Adding Data to the Cache

Pre-Fetching Treatments (concepts)

Pre-Fetching Treatments (syntax)

Intro to useAppointments Custom Hook

useQuery for useAppointments

Query Keys as Dependency Arrays

Code Quiz! Pre-Fetch Appointments

Summary: Query Features I

Query Features II: Transforming and Re-Fetching Data

Filtering Data with the useQuery select Option

Code Quiz! Selector for useStaff

Intro to Re-Fetch

Update Re-Fetch Options

Global Re-Fetch Options

Overriding Re-Fetch Defaults and Polling

Summary: Query Features II

React Query and Authentication

Intro to React Query and Authentication

Intro to useAuth and useUser

Dependent Query in useUser

Code Quiz! Dependent Query in useUserAppointments

Adding User Data to Query Cache

Removing User Appointments Data on Signout

Summary: React Query and Authentication

Mutations: Using React Query to Update Data on the Server

Introduction to Mutations and Mutations Global Settings

Custom Mutation Hook: useReserveAppointments

OPTIONAL: TypeScript for `mutate` Function

Invalidating Query after Mutation

Query Key Prefixes

Code Quiz! Mutation to Cancel an Appointment

Update User and Query Cache with Mutation Response

Intro to Optimistic Updates in React Query

Making a Query "Cancel-able"

Writing Optimistic Update

Summary: Mutations

Testing React Query

Intro to Testing React Query

Testing Setup, including Mock Service Worker

Query Client and Provider in Tests

Testing Rendered Query Data

Code Quiz! Test Rendered Staff Data

Testing Query Errors

Code Quiz! Staff Query Errors

Testing Mutations

Code Quiz! Test Cancel Appointment Mutation

Intro to Testing Custom Hooks

Test Appointments Filter

Code Quiz! Test Staff Filter

Summary: Testing React Query


Reviews

E
Eliran9 July 2021

ReactQuery is a must for server side data caching, and Bonnie explains every little detail you have to know in order to achieve your goal. In a few hours you'll go form 'I never heard of this query thing' to a master of the technology :) Highly recommend it !

S
Siamak23 June 2021

Wow great instructor and the content is very well done. Will definitely look for this instructors tutorials in the future.

J
Joseph22 June 2021

Very useful. React Query is a really handy data-fetching library. It make react an awful lot easier as it helps fetching, caching and updating server state. Without React Query, for example caching server data, can be quite tricky. This is a very useful guide to a very useful tool.

M
Maximo29 May 2021

Great course where you can see everything related with react-query and how we can implement it in our projects


4059358

Udemy ID

5/18/2021

Course created date

5/29/2021

Course Indexed date
Bot
Course Submitted by