Cache unexpected behavior with react-native on Android

[devpolo]

Hi every one 👋

Hope you are all doing well
It's been days since I’m facing a react-query problem.

I am using react-query in a react-native app.
In iOS, everything is working as expected.
On the other hand, on Android, the cache is never invalidate, even after the default 5 minutes (by the way, I didn’t modify the default options staleTime and cacheTime because they meet my needs).

For exemple, if I change a product title in my backend, it takes more than 24 hours to get update on my Android app (and 5 minutes on iOS).

Is there any one who can help me understand what is happening ?

react-native: 0.63.1
react-query: 3.9.8

[TkDodo]

not sure I fully understand, but my experience with react-native is very limited.

In iOS, everything is working as expected.

what is expected please? Do you have an example?

On the other hand, on Android, the cache is never invalidate, even after the default 5 minutes

cacheTime of 5 minutes has nothing to do with query invalidation. When a query is unused (=not rendered on the screen), it will be removed from the cache (garbage collected) after 5 minutes. But doesn't refetch it. I'm going into more details here: https://tkdodo.eu/blog/practical-react-query#the-defaults-explained

For exemple, if I change a product title in my backend, it takes more than 24 hours to get update on my Android app (and 5 minutes on iOS).

How so? With a staleTime of 0, whenever the component mounts or you e.g. focus the window (not sure how that works in native tbh), a refetch should happen.

[SamiChab]

Hello @TkDodo

First of all, thank you for your answer. I'm actually working with @devpolo and I will follow up this question.

what is expected please? Do you have an example?

We expect to get the fresh data from the backend when launching the app

How so? With a staleTime of 0, whenever the component mounts or you e.g. focus the window (not sure how that works in native tbh), a refetch should happen

Yes, it should happen, but it doesn't... No way to get fresh data with useQuery and useInfiniteQuery hooks. I've tried to manually set cacheTime: 1000 or to set refetchOnMount: 'always', but I always get data from cache.

react-native: 0.63.1
react-query: 3.9.8

[SamiChab]

Yes, here it is

[TkDodo]

max-age=14400 indicates that the browser can cache the resource for 4 hours, which seems to be the default for cloudfare. I'm guessing that the request is going out but being served from the browser cache.

[SamiChab]

@TkDodo interesting. Have you an idea of what I can do to change this duration ?

[TkDodo]

https://community.cloudflare.com/t/new-cloudflares-rules-on-cache-control/69770

[SamiChab]

@TkDodo thank you so much !! It works now. The backend developer set following header parameters: max-age=5, public, s-maxage=30