react-query offline mode
Does react-query support something like: it will fetch if device is online, staleTime work like it does now, but when device is offline, it will get data from storage no matter how old the cache is?
For example: I set staleTime: 5 minutes, if device is online, it will fetch again after 5 min, but if device is offline, it will always get data from cache storage
8 Replies
rising-crimson•4y ago
1) staleTime 5 minutes doesn't mean that there will be re-fetch after 5 minutes, that's not how it works
2) what kind of "storage" are you talking about? if you mean the persisters, then again, this is not how they work. They persist the cache somewhere so that they can be picked up when the app starts again
deep-jadeOP•4y ago
1) doesn't it? but when useQuery(...) with the same key after 5 min, it call the api
2) yes I mean the persister. So can't I achieve something like: online -> call api, offline -> it gets data from storage 😦
rising-crimson•4y ago
1) yes, because an event happens (mount, windowFocus, reconnect) where react-query does a smart refetch. But no matter the staleTime, if you mount a query and look at the page for 5 hours, there won't be a refetch. That's an import difference 🙂
2) The data from storage is always in-sync with the data in memory. if you successfully fetch, it is written to the external storage. if you want to render data that is already in the cache, it will be given to you. if you are online and data is stale, a background refetch will happen. if you're not online, query will go to paused fetchStatus to indicate that it tried to fetch, but couldn't.
there is no point where you have data in the external store but not in memory, so you cannot "get data from storage if you are offline" because that data is always available to you anyhow 🙂
deep-jadeOP•4y ago
Thank you @TkDodo 🔮
how can I access that data, I tried to use
queryClient.getQueryCache queryClient.getQueryData but it doesnt' return anything, even though I have those data in persisterdeep-jadeOP•4y ago
rising-crimson•4y ago
you just do
const { data } = useQuery(..) ?deep-jadeOP•4y ago
I use
queryClient.fetchQuery It returns nothing, the device is offline and data is stale
useCustomQuery does return data in cache but queryClient.fetchQuery doesn't. Did I make any mistakes?rising-crimson•4y ago
fetchQuery will only give you stale data if you pass a staleTime to it and the data in the cache isn't older than that. With fetchQuery you can't say "give me stale data and do a refetch" because it's imperative and it wouldn't "observe" the result anyways. I'm wondering what you are doing that you need fetchQuery ?