feat: implement force option for refreshing and triggeredBy for getCachedData
#25850
Conversation
|
|
|
To change the behaviour of cache usage when using the const { data, refresh } = await useFetch('https://icanhazdadjoke.com/', {
query: { page },
// overrides default behaviour
watch: (fetchOptions, { noCache, customCache }) => { // fetchOptions contain e.g. query
noCache([page]) // -> watches and internally calls refetch({force:true})
customCache([], 'custom') // -> refetch({cache: 'custom'})
return [fetchOptions] // returned normal watch deps
},
getCachedData: (key, cache) => nuxt.payload.data[key] || nuxt.static.data[key],
headers: {
Accept: 'application/json',
},
});For this variant, the default could be using Additionally, information could be passed on to With this, cache behaviour ( I hope this makes sense. |
| */ | ||
| getCachedData?: (key: string) => DataT | ||
| getCachedData?: (key: string, triggeredBy?: GetCachedDataTriggeredBy) => DataT |
There was a problem hiding this comment.
in honesty I'm not yet sure about this as an API. But I also might be missing something.
What is the situation where passing force wouldn't be good enough?
There was a problem hiding this comment.
In a scenario where you can't set force because watch is triggered - #24332 (comment)
There was a problem hiding this comment.
on the force option for refresh, could we just add the force option and basically ignore hasCachedData when forced? And always respect hasCachedData when calling refresh from watch?
🔗 Linked issue
Resolves #24332.
And linking #24271 for prep work
❓ Type of change
📚 Description
This PR adds a
forceoption to torefreshfunction (fromuseAsyncData) and a force option torefreshNuxtData. It allows to bypass a possibly existinggetCachedDatafunction and forces to refetch.As
forcecannot be set when watching params, e.g. throughuseFetchor manually inuseAsyncData,getCachedDatanow receives the "context" that triggered the function and requests the cached data, allowing more granular results.Happy for feedback on the implementation.
📝 Checklist