React Query: Fetch, cache, and update server data using queries and mutations | ReactJS Tutorial

In this video we discuss introducing React Query to a ReactJS application. React Query provides a hooks API which allows you to fetch, cache, and update data. At first glance it seems like just a simple library, however you'll find out that it is packed with features which pretty much handle most of the server state management concerns that you might have in any client application. This includes things like automatically de-duping requests, background refreshing, caching, optimistic updating, accessing data globally and several others.

If you make React Query manage your server state, you'll find that the remaining client state that requires management becomes VERY small and likely will remove the need for more complex solutions like Redux. This is state management solution that you absolutely should know about if you're a React developer!

00:00 - Intro
00:25 - Why you need React Query
02:08 - What we're going to build in this tutorial
03:15 - Using axios to define our reusable API methods
05:09 - Setting up the QueryClient and Devtools
07:10 - Intro to fetching data with the useQuery hook
10:06 - Utilizing loading states
11:21 - Catching errors and basic error handling
21:05 - Important defaults to know about
21:26 - Auto Caching and garbage collection
22:44 - Auto background data refetching/refreshing
30:00 - Using mutations and the useMutation hook to update data
33:56 - Invalidating data in the cache (trigger refresh)
36:44 - Optimistic updates
39:58 - Updating the cached data using the response data
42:55 - Looking at what else React Query provides
43:36 - Conclusion: Discuss the point of React Query and if you still need things like Redux
45:23 - Outro