React Query TanStack Query React Server State Management

Mastering queries, mutations, integration with auth, testing and more!
React Query TanStack Query React Server State Management
File Size :
2.89 GB
Total length :
7h 54m

Category

Instructor

Bonnie Schulkin

Language

Last update

10/2023

Ratings

4.5/5

React Query TanStack Query React Server State Management

What you’ll learn

React Query version 3 queries, mutations, and cache control
Using React Query for pagination, infinite scroll, and optimistic updates
Integrating React Query with Authentication
Testing React Query

React Query TanStack Query React Server State Management

Requirements

Experience with React
Familiarity with React Hooks
For the testing portion, basic familiarity with Testing Library syntax

Description

COURSE UPDATE IN PROGRESS!The course author is currently creating a major course update to use React Query v5. The update is scheduled for release in December 2023. If you have purchased this course before then, you will have access to the update at no extra charge. –React Query (also called TanStack 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 dataThis course starts with a simple app to learn the basics of React Query version 3: queriesloading and error statesReact Query dev toolspagination and pre-fetchingmutationsThen 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, pluscentralizing loading and error handlingfiltering dataintegrating React Query with authways to keep data up to date after mutations, including optimistic updatestesting React QueryOther 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 courseample opportunities to practice with periodic “code quizzes” to make sure you’re understanding the conceptsvisual models for complicated concepts to help understand all of the moving piecesthe major project is written in TypeScriptsupportive instructor who loves engaging with students in Q&ACome see what the hype is about, and improve your apps with simpler, more powerful server state management!

Overview

Section 1: Creating Queries and Loading / Error states

Lecture 1 Introduction to React Query

Lecture 2 Introduction to this Course

Lecture 3 IMPORTANT: React Query version 3 vs. version 4

Lecture 4 First project: Blog-em Ipsum

Lecture 5 (optional) TROUBLESHOOTING: Node v. 17 and above

Lecture 6 (optional) TROUBLESHOOTING: create-react-app and React Query 4.10+

Lecture 7 Creating Queries with useQuery

Lecture 8 Handling Loading and Error States

Lecture 9 React Query Dev Tools

Lecture 10 staleTime vs cacheTime

Section 2: Pagination, Pre-fetching and Mutations

Lecture 11 Intro to Code Quizzes

Lecture 12 Code Quiz! Create Query for Blog Comments

Lecture 13 Query Keys

Lecture 14 Pagination

Lecture 15 Pre-fetching Data

Lecture 16 isLoading vs isFetching

Lecture 17 Intro to Mutations

Lecture 18 Delete Post with useMutation

Lecture 19 Code Quiz! Mutation to Update Post Title

Lecture 20 Summary: React Query Basics

Section 3: Infinite Queries for Loading Data “Just in Time”

Lecture 21 Introduction to Infinite Scroll

Lecture 22 Code Quiz! Set up Infinite SWAPI for React Query

Lecture 23 Intro to useInfiniteQuery

Lecture 24 CORRECTION to following lecture: `useInfiniteQuery` not `useInfiniteScroll`!

Lecture 25 Infinite Scroll Diagram

Lecture 26 Write useInfiniteQuery Call

Lecture 27 InfiniteScroll Component

Lecture 28 useInfiniteQuery Fetching and Error states

Lecture 29 Code Quiz! Infinite Species

Lecture 30 Summary: Infinite Scroll

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

Lecture 31 Intro to Lazy Days Spa App

Lecture 32 Notes on ESLint and Prettier Formatting

Lecture 33 React Query ESLint plugin!

Lecture 34 Lazy Days Spa App Code Orientation

Lecture 35 Chakra UI update: `align` instead of `textAlign`

Lecture 36 Install and set up React Query

Lecture 37 REMINDER: start the server before the next lecture!

Lecture 38 Custom Query Hook: useTreatments

Lecture 39 Fallback Data

Lecture 40 Centralized Fetching indicator with useIsFetching

Lecture 41 onError Handler for useQuery

Lecture 42 UPDATE: alternative way to specify global error handler

Lecture 43 onError Default for Query Client

Lecture 44 Code Quiz! Custom Hook for useStaff

Lecture 45 Summary: Larger App Setup, Centralization, Custom Hooks

Section 5: Query Features I: Pre-Fetching and Pagination

Lecture 46 Adding Data to the Cache

Lecture 47 Pre-Fetching Treatments (concepts)

Lecture 48 Pre-Fetching Treatments (syntax)

Lecture 49 Intro to useAppointments Custom Hook

Lecture 50 useQuery for useAppointments

Lecture 51 Query Keys as Dependency Arrays

Lecture 52 Code Quiz! Pre-Fetch Appointments

Lecture 53 Summary: Query Features I

Section 6: Query Features II: Transforming and Re-Fetching Data

Lecture 54 Filtering Data with the useQuery select Option

Lecture 55 Code Quiz! Selector for useStaff

Lecture 56 Intro to Re-Fetch

Lecture 57 Update Re-Fetch Options

Lecture 58 Global Re-Fetch Options

Lecture 59 Overriding Re-Fetch Defaults and Polling

Lecture 60 Polling: Auto Re-Fetching at an Interval

Lecture 61 Summary: Query Features II

Section 7: React Query and Authentication

Lecture 62 Intro to React Query and Authentication

Lecture 63 useAuth, useUser and useQuery

Lecture 64 Integrate Auth with React Query

Lecture 65 Persist User Data in localStorage

Lecture 66 initialData from localStorage for useQuery

Lecture 67 Dependent Queries: userAppointments

Lecture 68 Query Client removeQueries method

Lecture 69 Summary: React Query and Auth

Section 8: Mutations: Using React Query to Update Data on the Server

Lecture 70 Introduction to Mutations and Mutations Global Settings

Lecture 71 UPDATE: another way to specify global mutation error handler

Lecture 72 Custom Mutation Hook: useReserveAppointments

Lecture 73 OPTIONAL: TypeScript for `mutate` Function

Lecture 74 Invalidating Query after Mutation

Lecture 75 Query Key Prefixes

Lecture 76 Code Quiz! Mutation to Cancel an Appointment

Lecture 77 Update User and Query Cache with Mutation Response

Lecture 78 Intro to Optimistic Updates in React Query

Lecture 79 IMPORTANT! Update to following lecture

Lecture 80 Making a Query “Cancel-able”

Lecture 81 Writing Optimistic Update

Lecture 82 Summary: Mutations

Section 9: Testing React Query

Lecture 83 Intro to Testing React Query

Lecture 84 Testing Setup, including Mock Service Worker

Lecture 85 Query Client and Provider in Tests

Lecture 86 Testing Rendered Query Data

Lecture 87 Code Quiz! Test Rendered Staff Data

Lecture 88 Testing Query Errors

Lecture 89 Code Quiz! Staff Query Errors

Lecture 90 Testing Mutations

Lecture 91 Code Quiz! Test Cancel Appointment Mutation

Lecture 92 Intro to Testing Custom Hooks

Lecture 93 PLEASE READ: update to the following lecture

Lecture 94 Test Appointments Filter

Lecture 95 Code Quiz! Test Staff Filter

Lecture 96 Summary: Testing React Query

Section 10: Bonus

Lecture 97 Coupons!

React developers who want to learn an efficient, powerful system for managing server state

Course Information:

Udemy | English | 7h 54m | 2.89 GB
Created by: Bonnie Schulkin

You Can See More Courses in the IT & Software >> Greetings from CourseDown.com

New Courses

Scroll to Top