Refresh fresh data once after hydration from persistent cache

[rjkip]

I've been a bit hesitant to post this question, since I feel others must've asked similar questions. I just can't find them!

I'm happily using a query with a 10-minute stale time. I don't want the query refetched every time the query is mounted, or when the user refocusses the tab, before the 10 minutes are up. This works great!

However, I'd like the persistently cache the data so the user can interact with stale data on app load, even as the query is refetched immediately to refresh the data. In other words, I want the hydrated data to be stale immediately, or to act as placeholder data. The intention is that the data is forced to be fresh after the user performs a page load one way or another. What currently happens, is that the cached data is hydrated and is still considered fresh, because the data is less than 10 minutes old.

I'm not sure how to configure this, or whether it's even possible at all.

👉 Example project to illustrate my question: https://stackblitz.com/edit/tanstack-query-1u6ax4?file=src%2Findex.jsx

[frederikhors]

Can #7204 help you? Is this what you're looking for?

Can you please fix your issue code?

[rjkip]

Hi @frederikhors, thanks for replying. (Fixed the code 🤦)

Unless I misunderstand, I don't think that's what I'm looking for. I've got queries with dynamic query keys and can't really predict which ones to call ensureQueryData() for. Additionally, the queries would then just have the 10-minute old, but fresh, data, like they do now? I want to force a refresh after the query data is hydrated from cache. I've even tried useEffect(() => query.refetch(), []); to force it, but that doesn't seem to do what I want (or anything).

I'll see if I can whip up an example.

[rjkip]

Okay this should illustrate my question: https://stackblitz.com/edit/tanstack-query-1u6ax4?file=src%2Findex.jsx

[rjkip]

As an intermediate solution I've wrapped useQuery() and immediately refetch the query after the query is enabled the first time (per key).

[TkDodo]

PersistQueryClientProvider has an onSuccess callback - you can just call queryClient.invalidateQueries() there to refetch all queries right after restoring.

[rjkip]

That's exactly what I needed. Never found that nugget in the docs. Thanks!

[TkDodo]

https://tanstack.com/query/v5/docs/framework/react/plugins/persistQueryClient#props