React Query Tutorial - 8 - Refetch Defaults

welcome back everyone in the past two videos we learned about query cache and stale time we got to know that react query has a default cache duration of five minutes and a default stale time of zero seconds in this video let's learn two more configurations related to refetching for which react query provides a default value the first one is refetch on mount by default it is set to true if it is set to true the query will refetch on mount if the data is stale so back in the browser every time we navigate to our cue super heroes the query will refetch home rq superheroes and we see another network request and this is the default behavior which is similar to how traditional data fetching happens as well data is fetched every time the component mounts now you could choose to set it to false in which case the query will not refetch on mount so set it to false head back to the browser refresh navigate the first time the data is fetched and if we come back to the page the query data will not refetch another possible value you can specify is the string always so irrespective of whether the query data is stale or not the query will always refresh the data when the component mounts now if you ask me the default value of true is probably the best option let's now move on to the second configuration which is refetch on window focus this option is slightly more important than refetch on mount let's understand how it works back in the browser i'm going to refresh the home page and i'm going to open traditional superheroes page and we can see the list of three heroes i'm going to go back to vs code and in db.json change batman to batman dark knight if you go back to the browser the list does not reflect the change in name there is no way for the component to know if the remote data has changed only when we refresh we see the updated name let's compare this with react query superheroes page at the moment we see batman dark knight i'm going to go back to vs code and reset it to batman if we now return to the browser you can see the list automatically updates our ui is now in sync with the remote data this is possible because of the refetch on window focus configuration by default it is set to true so any time your tab loses focus and gains focus again a background refetch is initiated when the refetch completes the ui is updated with the data retrieved and this is a perfectly valid default value which ensures your ui is up to date with the remote data when your user comes back to the application however if you wish to you can set it to false in which case the query will not refetch on window focus or you can set it to the string always irrespective of whether the query data is still or not this is an important default to cover since as a beginner it would be a surprise if your data is automatically updating when you focus the window a pleasant surprise but a surprise nevertheless hopefully you now know it is the refetch on window focus configuration that is causing this all right in the next video let's see how to pull data or automatically refresh data at regular intervals thank you for watching make sure to subscribe to the channel and i'll see you in the next one

Channel: Codevolution

Views: 3,462

Keywords: Codevolution, React, React Query, React Query Tutorial, React Query Tutorial for Beginners, React Data Fetching, React Query for Beginners, Refetch Defaults, Refetch Defaults with React Query

Id: A3gN4ji5p6E

Length: 5min 18sec (318 seconds)

Published: Sun Oct 10 2021