React Query Tutorial - 6 - Query Cache

in this video we're going to learn about a really important feature of react query which is the query cache and this is a feature the library provides out of the box and is important to understanding why use query works the way it does let me show you something you might find interesting we are here at the home page of our application i'm going to empty cache and hard reload the devtools does not show any query at the moment i want you to observe what happens when we navigate to the traditional superhero screen we want a slower network speed for this example so i will throttle to fast 3g make sure json server is still running and navigate to traditional superheroes we see the loading text and then the list of heroes go back home click on traditional superheroes again we see the loading text and then the heroes every time we do this we always see the loading text let's now compare this with the rq superheroes list if we navigate we see the loading text and then the list of heroes however if we go home and come back we don't see the loading text and this is because of the query cache that react query provides by default every query result is cached for five minutes and react query relies on that cache for subsequent requests let me explain in a bit more detail as it is really important to understand how use query works with respect to caching the first time use query is fired for superheroes key is loading is set to true and a network request is sent to fetch the data when the request is completed it is cached using the query key and the fetch superheroes function as the unique identifiers now when we navigate to the home page and revisit the rq super heroes page react query will check if the data for this query exists in cache since it does the cached data is immediately returned without ease loading set to true and that is the reason we don't see the loading text for subsequent requests however react query knows that the server data might have updated and the cache might not contain the latest data so a background refetch is triggered for the same query and if the fetch is successful the new data is updated in the ui since our data is the same as the cached data we don't see any change in the ui i hope this part of use query and query cache is clear to you now you might be wondering if ease loading is not changed does use query provide another boolean flag to indicate the background refetching of the query the answer is yes and the flag is called ease fetching let's log both ease loading and ease fetching to the console which will help us better track the network activity head to the browser empty cache and hard reload navigate to rq superheroes and in the console you can see initially both ease loading and is fetching are true when the data fetching is complete both are set to false let's look at another example where the data does change to make sure we get this right let me now navigate to the home page and back in vs code in db.json update hero name for wonder woman wonder woman one if we go back to the browser i want you to first observe the list of heroes on the left we will see the cached list from before and then the list updates when the background refetching has completed so wonder woman and then one you can see in the console ease loading remains false but ease fetching changes from true to false so in this way react query out of the box leads to better user experience as there is a list being displayed already and then the list updates in the background a user does not have to see the loading indicator every single time all right now that you have a better idea about query cache i'm guessing your next question is about the cache time how do we configure it well like i mentioned react query sets a default value of 5 minutes for the query cache and that is a good default which you can leave as it is if you really want to change it though pass in a third argument to use query the third argument is an object where you can configure multiple properties of which cache time is one of them let's set it to 5 seconds or 5000 milliseconds if we now head back to the browser empty cache hard reload navigate to rq superheroes page the query is executed and cached if the query is active that is it has an active observer it will continue to remain in cache you can see the query key right here if we now navigate to the home page the query becomes inactive and after five seconds the query is garbage collected if you now go back to rq superheroes page you will see the loading text again and then the list while the query is still cached though navigating back and forth you will see the cached data and a refetch in the background you don't have to see the loading state like i mentioned earlier in the video query cache is a feature provided out of the box with a default cache duration of 5 minutes and understanding what role it plays in data fetching is very important when using react query hopefully this video has helped you with that thank you for watching make sure to subscribe to the channel and i'll see you in the next video

Channel: Codevolution

Views: 4,929

Keywords: Codevolution, React, React Query, React Query Tutorial, React Query Tutorial for Beginners, React Data Fetching, React Query for Beginners, Query Cache, React Query Query Cache

Id: 2TX8ojaSwF0

Length: 8min 5sec (485 seconds)

Published: Wed Oct 06 2021