React Query / TanStack Query: React Server State Management
- Descripción
- Currículum
- Reseñas
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
-
3IMPORTANT: React Query version 3 vs. version 4Text lesson
-
4First project: Blog-em IpsumVideo lesson
-
5(optional) TROUBLESHOOTING: Node v. 17 and aboveText lesson
-
6(optional) TROUBLESHOOTING: create-react-app and React Query 4.10+Text lesson
-
7Creating Queries with useQueryVideo lesson
-
8Handling Loading and Error StatesVideo lesson
-
9React Query Dev ToolsVideo lesson
-
10staleTime vs cacheTimeVideo lesson
-
11Intro to Code QuizzesVideo lesson
-
12Code Quiz! Create Query for Blog CommentsVideo lesson
-
13Query KeysVideo lesson
-
14PaginationVideo lesson
-
15Pre-fetching DataVideo lesson
-
16isLoading vs isFetchingVideo lesson
-
17Intro to MutationsVideo lesson
-
18Delete Post with useMutationVideo lesson
-
19Code Quiz! Mutation to Update Post TitleVideo lesson
-
20Summary: React Query BasicsVideo lesson
-
21Introduction to Infinite ScrollVideo lesson
-
22Code Quiz! Set up Infinite SWAPI for React QueryVideo lesson
-
23Intro to useInfiniteQueryVideo lesson
-
24CORRECTION to following lecture: `useInfiniteQuery` not `useInfiniteScroll`!Text lesson
-
25Infinite Scroll DiagramVideo lesson
-
26Write useInfiniteQuery CallVideo lesson
-
27InfiniteScroll ComponentVideo 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
-
35Chakra UI update: `align` instead of `textAlign`Text lesson
-
36Install and set 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 Handler for useQueryVideo lesson
-
42UPDATE: alternative way to specify global error handlerText lesson
-
43onError Default for Query ClientVideo lesson
-
44Code Quiz! Custom Hook for useStaffVideo lesson
-
45Summary: Larger App Setup, Centralization, Custom HooksVideo lesson
-
46Adding Data to the CacheVideo lesson
-
47Pre-Fetching Treatments (concepts)Video lesson
-
48Pre-Fetching Treatments (syntax)Video lesson
-
49Intro to useAppointments Custom HookVideo lesson
-
50useQuery for useAppointmentsVideo lesson
-
51Query Keys as Dependency ArraysVideo lesson
-
52Code Quiz! Pre-Fetch AppointmentsVideo lesson
-
53Summary: Query Features IVideo lesson
-
54Filtering Data with the useQuery select OptionVideo lesson
-
55Code Quiz! Selector for useStaffVideo lesson
-
56Intro to Re-FetchVideo lesson
-
57Update Re-Fetch OptionsVideo lesson
-
58Global Re-Fetch OptionsVideo lesson
-
59Overriding Re-Fetch Defaults and PollingVideo lesson
-
60Polling: Auto Re-Fetching at an IntervalVideo lesson
-
61Summary: Query Features IIVideo lesson
-
62Intro to React Query and AuthenticationVideo lesson
-
63useAuth, useUser and useQueryVideo lesson
-
64Integrate Auth with React QueryVideo lesson
-
65Persist User Data in localStorageVideo lesson
-
66initialData from localStorage for useQueryVideo lesson
-
67Dependent Queries: userAppointmentsVideo lesson
-
68Query Client removeQueries methodVideo lesson
-
69Summary: React Query and AuthVideo lesson
-
70Introduction to Mutations and Mutations Global SettingsVideo lesson
-
71UPDATE: another way to specify global mutation error handlerText lesson
-
72Custom Mutation Hook: useReserveAppointmentsVideo lesson
-
73OPTIONAL: TypeScript for `mutate` FunctionVideo lesson
-
74Invalidating Query after MutationVideo lesson
-
75Query Key PrefixesVideo lesson
-
76Code Quiz! Mutation to Cancel an AppointmentVideo lesson
-
77Update User and Query Cache with Mutation ResponseVideo lesson
-
78Intro to Optimistic Updates in React QueryVideo lesson
-
79IMPORTANT! Update to following lectureText lesson
-
80Making a Query "Cancel-able"Video lesson
-
81Writing Optimistic UpdateVideo lesson
-
82Summary: MutationsVideo lesson
