React Query / TanStack Query: React Server State Management

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

Other useMutation Properties

Code Quiz! Mutation to Update Post Title

Summary: React Query Basics

Introduction to Infinite Scroll

CORRECTION: Updated SWAPI address (and alternative to SWAPI)

Code Quiz! Set up Infinite SWAPI for React Query

Intro to useInfiniteQuery

UseInfiniteQuery Diagram

Write useInfiniteQuery Call

InfiniteScroll Component

TROUBLESHOOTING: page 2 loads twice on initial load!

UseInfiniteQuery Fetching and Error states

Code Quiz! Infinite Species

Summary: Infinite Scroll

Intro to Lazy Days Spa App

Notes on ESLint and Prettier Formatting

React Query ESLint plugin!

Lazy Days Spa App Code Orientation

Install React Query

Set up React Query

REMINDER: start the server before the next lecture!

Custom Query Hook: useTreatments

Fallback Data

Centralized Fetching indicator with useIsFetching

OnError Default for Query Client

Code Quiz! Custom Hook for useStaff

Summary: Larger App Setup, Centralization, Custom Hooks

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

CORRECTION to the following lecture (useCallback)

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

Polling: Auto Re-Fetching at an Interval

Summary: Query Features II

Intro to React Query and Authentication

Hooks for Auth and User Data

Add useQuery call to useUser

SetQueryData and removeQueries

Code Quiz! add useQuery to useUserAppointments

Summary: React Query and Auth

Introduction to Mutations and Mutations Global Settings

Custom Mutation Hook: useReserveAppointments

Invalidating Query after Mutation

Code Quiz! Mutation to Cancel an Appointment

Update User and Query Cache with Mutation Response

Subtle Issue with User Query Key: Token in Dependency Array

Intro to Optimistic Updates in React Query

Writing Optimistic Update

Summary: Mutations

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

Testing Mutations

Intro to Testing Custom Hooks

Test Appointments Filter

Code Quiz! Test Staff Filter

Summary: Testing React Query

Coupons!