React Query Tutorial - 7 - Stale Time

welcome back everyone in the previous video we learned about the query cache feature in react query one of the uses of caching the query results is being able to reuse the results for subsequent queries that will allow the user to view the previously fetched data without having to view the loading indicator every single time thus leading to a slightly better user experience and we witness that with our superheroes query so if you navigate to rq superheroes we see loading text and then the superheroes list go home come back we don't see the loading indicator anymore now another use of query cache is to reduce the number of network requests for data that doesn't necessarily change too often for example let's say our list of superheroes does not change often and it is okay if the user sees stale data for a while in such cases we can use the cached query results without having to refetch in the background to achieve that behavior we configure another property called stale time let's see how it works with an example at the moment if we navigate to rq superheroes navigate away and come back a background request is triggered to fetch the latest data but as the developer i know that the list of superheroes does not change often even if it does it is okay if the user is seeing steel data for perhaps 30 seconds what we can do then is add another property called stale time and set it to 30 seconds for our use query hook so back in vs code we're going to set still time 30 seconds and the cache time i'm in fact going to fall back to the default value of 5 minutes as that is perfectly reasonable so i'm going to remove the option since the default value is what we need our configuration is now cache duration of 5 minutes with stale time of 30 seconds let's save the file and head back to the browser we are on the home page and we have no queries cached navigate to our cue page and we see the superheroes query but what is different now is the query has a fresh flag instead of stale and the query will remain fresh for 30 seconds what that means is if you navigate home and come back in the network tab you can observe that the query is not fetched in the background so in addition to ease loading being false is fetching is also false there is no additional request within the 30 second time frame for now go back home refresh go to rq superheroes and wait 30 seconds you can see the query has now turned stale from fresh so if you were to go home and come back you should see a request in the network tab and in the console is fetching what's true and then false this indicates a background request to fetch the latest data and the new data once again holds good for 30 more seconds this is how you can reduce the number of network requests during the stale time coupled with the query cache now a very important detail to note is that the default still time is zero seconds which is why previously every visit to the react query super heroes page would trigger a background refatch zero seconds is probably the safest value you can set to steal time which is why it is also the default value but you as the developer know your application best so tweak the value based on your requirements all right then thank you for watching please do leave a like if you're finding the videos helpful and we'll see you in the next one

Channel: Codevolution

Views: 4,143

Keywords: Codevolution, React, React Query, React Query Tutorial, React Query Tutorial for Beginners, React Data Fetching, React Query for Beginners, Stale Time, React Query Stale Time

Id: 0BtcMLJ_Zdc

Length: 5min 18sec (318 seconds)

Published: Wed Oct 06 2021