Network-first, persisted cache fallback strategy using React Query

[bacarybruno]

Hello 👋

I’m working on a React Native app and I would like to implement the following strategy:

• The app always tries the API first (no fallback at this point)
• If the request fails (offline or error), it falls back to persisted data
• When the network succeeds again, new data overrides the old cache
• The cache is persisted across app restarts

Is persistQueryClient adapted for this use case? 🙏

[TkDodo]

I guess, but your first and last point kinda contradict each other? “The app always tries the API first” does that also apply when the app restarts? I’m confused.

Our persisters will always read from the persisted storage before trying any API requests, then you’ll get that data back and if its stale or there is no data, you’ll get a fetch.

On the very first attempt, the data in the persisted storage is just empty so it’ll read that empty data and will make a request after that.

[bacarybruno]

does that also apply when the app restarts?

Yes also when the app restarts. We only want the persisted cache to be used when our api call fails

[TkDodo]

then you need to build this yourself, likely by doing try/catch in the queryFn and then read from the fallback cache when you get an error.

[bacarybruno]

Okay thanks. Do you think this could be a useful addition to TanStack Query itself? For example a dedicated mode that always prefers the network and uses persisted data only when a request fails.

[bacarybruno]

I can work on it if that's the case

[TkDodo]

I’ve never seen this request before so the answer is likely no. TanStack Query is all about showing data as fast as possible, it’s not in-line with not showing persisted data that we already have even if its stale.