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

[shivrajnag]

To learn/use react-query. Key-points to remember
1) Read about very imp topics like Important Defaults, Optimistic Update in react-query doc
2) Monitor your Network calls in Network tabs in Dev Tools. Make sure you are making API calls according to your need, because react-query comes with some default settings which you might not want and you can always override it. Throttle your network speed to see different scenarios.

[kevnglvz]

I really appreciate how you presented react-query, it was clearly explained as it was being coded. I'm currently learning this package for work and your tutorial was very timely. I also see a tutorial for NestJs--TypeScript, which I'm excited to learn! Subbed!

[EliZevin]

I appreciate how clear and understandable your explanation is

[ytlagu]

got knowledge that I have been looking for over 3 years, I am talking about handling the "U" in CRUD operation. Thanks Marius!!! Great video...

[beorntwit]

My man, you're quickly becoming my goto teacher for more modern JS web dev stuff. Your topic choices are on point, and the presentation is great.

[anthonymarquez]

I wish I had found this video a few months ago. You’re really clear at explaining this and have everything laid out accordingly. Thank you for this!

[namesurname]

Best react-query explanation, thanks a lot

[shlol]

the best tutorial on useQuery, it was such a confusing topic for me. But now super clear!

[toannew]

19:30: prevent the api is call before id is available (using OPTIONs)
34:10 update data on Cache after mutating (useQueryClient)
37:30: update data (2nd method) onMutate

[andregomes]

That’s an amazing content bro. You made it look like easy! Thanks a lot

[winafiuu]

You could name this video to 'No bullshit guide to React-Query'. The video was on point! Many many thanks! Just love your content.

[FH]

Thanks Dude, it has really been a great walk through. I have applied it at work today.Keep it up.

[mikemontgomery]

Great explanation. Ive had a hard time getting my head around this new server cache management abstraction.

[StephenMcMahon]

Thanks for another great lesson, Marius. I've recently passed several of your videos on to my colleagues.

[samuelcouillard]

Thank you so much. This is the best Query tutorial I have seen so far - most of them seem to obviate the useMutation for some reason.

[AnsgarSteinkamp]

React Query is great, and this tutorial is even greater! Thank you very much, Marius! PS: For an extended version of this tutorial, I'd recommend the Udemy-course of Bonnie Schulkin, which is really excellent, too.

[MaybeBLTZ]

soo i switch my project from node to nestjs because of you now i might also switch to react-query you are amazing my friend

[mahmudulmurad]

wow, best react-query explanation, thanks a lot man. This was just perfect as i expected. you covered the most important edge cases which may take lot of time in the first place if someone didn't know. Best of luck man.

[amisoliman]

Thanks Marius, your video helped me understand this very well :)

[anoopvasudevan]

hey, thanks for this. Neatly explained and good presentation. Liked the part where you explained the default cache time. Could have covered the stale time as well along with that.