React Query / TanStack Query: React Server State Management
- Description
- Curriculum
- FAQ
- Reviews
Version 5 update released!
As of January 2024, this course covers React Query version 5.
—
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 data
This course starts with a simple app to learn the basics of React Query version 3:
-
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!
-
1Introduction to React QueryVideo lesson
-
2Introduction to this CourseVideo lesson
-
3First project: Blog-em IpsumVideo lesson
-
4Adding a Query Client and ProviderVideo lesson
-
5Creating Queries with useQueryVideo lesson
-
6Handling Loading and Error StatesVideo lesson
-
7React Query Dev ToolsVideo lesson
-
8staleTime vs gcTimeVideo lesson
-
9Intro to Code QuizzesVideo lesson
-
10Code Quiz! Create Query for Blog CommentsVideo lesson
-
11Query KeysVideo lesson
-
12PaginationVideo lesson
-
13Pre-fetching DataVideo lesson
-
14isLoading vs isFetchingVideo lesson
-
15Intro to MutationsVideo lesson
-
16Delete Post with useMutationVideo lesson
-
17Other useMutation PropertiesVideo lesson
-
18Code Quiz! Mutation to Update Post TitleVideo lesson
-
19Summary: React Query BasicsVideo lesson
-
20Introduction to Infinite ScrollVideo lesson
-
21TROUBLESHOOTING: Alternative to SWAPIText lesson
-
22Code Quiz! Set up Infinite SWAPI for React QueryVideo lesson
-
23Intro to useInfiniteQueryVideo lesson
-
24useInfiniteQuery DiagramVideo lesson
-
25Write useInfiniteQuery CallVideo lesson
-
26InfiniteScroll ComponentVideo lesson
-
27TROUBLESHOOTING: page 2 loads twice on initial load!Text lesson
-
28useInfiniteQuery Fetching and Error statesVideo lesson
-
29Code Quiz! Infinite SpeciesVideo lesson
-
30Summary: Infinite ScrollVideo lesson
-
31Intro to Lazy Days Spa AppVideo lesson
-
32Notes on ESLint and Prettier FormattingText lesson
-
33React Query ESLint plugin!Text lesson
-
34Lazy Days Spa App Code OrientationVideo lesson
-
35Install React QueryVideo lesson
-
36Set up React QueryVideo lesson
-
37REMINDER: start the server before the next lecture!Text lesson
-
38Custom Query Hook: useTreatmentsVideo lesson
-
39Fallback DataVideo lesson
-
40Centralized Fetching indicator with useIsFetchingVideo lesson
-
41onError Default for Query ClientVideo lesson
-
42Code Quiz! Custom Hook for useStaffVideo lesson
-
43Summary: Larger App Setup, Centralization, Custom HooksVideo lesson
-
44Adding Data to the CacheVideo lesson
-
45Pre-Fetching Treatments (concepts)Video lesson
-
46Pre-Fetching Treatments (syntax)Video lesson
-
47Intro to useAppointments Custom HookVideo lesson
-
48useQuery for useAppointmentsVideo lesson
-
49Query Keys as Dependency ArraysVideo lesson
-
50Code Quiz! Pre-Fetch AppointmentsVideo lesson
-
51Summary: Query Features IVideo lesson
-
52Filtering Data with the useQuery select OptionVideo lesson
-
53Code Quiz! Selector for useStaffVideo lesson
-
54Intro to Re-FetchVideo lesson
-
55Update Re-Fetch OptionsVideo lesson
-
56Global Re-Fetch OptionsVideo lesson
-
57Overriding Re-Fetch Defaults and PollingVideo lesson
-
58Polling: Auto Re-Fetching at an IntervalVideo lesson
-
59Summary: Query Features IIVideo lesson
-
60Intro to React Query and AuthenticationVideo lesson
-
61Hooks for Auth and User DataVideo lesson
-
62Add useQuery call to useUserVideo lesson
-
63setQueryData and removeQueriesVideo lesson
-
64Code Quiz! add useQuery to useUserAppointmentsVideo lesson
-
65Summary: React Query and AuthVideo lesson
-
66Introduction to Mutations and Mutations Global SettingsVideo lesson
-
67Custom Mutation Hook: useReserveAppointmentsVideo lesson
-
68Invalidating Query after MutationVideo lesson
-
69Code Quiz! Mutation to Cancel an AppointmentVideo lesson
-
70Update User and Query Cache with Mutation ResponseVideo lesson
-
71Subtle Issue with User Query Key: Token in Dependency ArrayVideo lesson
-
72Intro to Optimistic Updates in React QueryVideo lesson
-
73Writing Optimistic UpdateVideo lesson
-
74Summary: MutationsVideo lesson
-
75Intro to Testing React QueryVideo lesson
-
76Testing Setup, including Mock Service WorkerVideo lesson
-
77Query Client and Provider in TestsVideo lesson
-
78Testing Rendered Query DataVideo lesson
-
79Code Quiz! Test Rendered Staff DataVideo lesson
-
80Testing Query ErrorsVideo lesson
-
81Testing MutationsVideo lesson
-
82Intro to Testing Custom HooksVideo lesson
-
83Test Appointments FilterVideo lesson
-
84Code Quiz! Test Staff FilterVideo lesson
-
85Summary: Testing React QueryVideo lesson
External Links May Contain Affiliate Links read more