Up til now we mostly discussed data fetching and mutating using react-query but is it all , has it got any more things just than fetching and mutating stuff the answer is it can also be a asynchronous state manage instead we should say that react-query is a async state manager and small part of it consist of the network activity.
Alright Lets start with React-Query as State Manager!
React Query as State Manager
So how is it possible to maintain state globally using react-query, in the initialisation of our series we started with some basic terminologies such as queryKey so their we mentioned that it maintains the data fetching call/query uniquely with a key which unleashed some power and this is the power we were talking about the queryKey, react-query shines out until we feed the promises ( I mean till the time we do data fetching cause data fetching mostly produce promises); so if I call query at two different places in my codebase with the same queryKey it will give me the same data.
function Place1 () {
const {data : spotifyData} = useSpotifyData();
----
-----
-----
----
}
function Place2 () {
const {data : spotifyData} = useSpotifyData();
----
----
----
----
}
here if we see both the component calls the same custom hook which abstracts out the useQuery() data fetching function to be written again and again and have a query-key in common which renders the same data.
But how do we keep the data synchronize then ?
Yes this too have an answer, the react-query being a server state library this have nothing to do where front-end can own the data , if we display the data on front-end than it is always the one which is fetched from API and we just render the small parts of it , so for example the application like instagram where a user posts the photos and the comments and likes are changing real time , how much of it is accurate (by accurate I mean how much of them is stale, as it changes from fresh to stale very fast)
Lets see how react query synchronises the data
Loader or some Data that is stale ?
React-query is very famous for its caching mechanism hence react-query prepares & cache the data whenever you need to render it on front-end even if it is stale data as users might not like some loading state or no data until freshly brewed data renders on screen.
Moreover to decide when is to re-validate stale data that is making a query to the back-end interface for fresh data and to be keeping our re-renders in-expensive we need to make some great decision for re-fetch
When we can do the refetches then ?
refetchOnWindowFocus : This might seem crazy when we are in a development mode but in production this do make sense , as it revalidates whenever we focus or switch the browser tabs , but when user does this after leaving application open for a long time and then if the user returns to the application, hence feeding the fresh data will always be great.
refetchOnReconnect : whenever you loose the connection and re-gain it will revalidate at that point of time
refetchOnMount : this revalidates happen's when the component having the query useQuery mounts
That's all Folks This blog was small I know but this will be paving a good road-map ahead making our journey more beautiful, well until next time its a goodbye
If you are till here , please drop some feedback or like the blog, Goodbye
Top comments (0)