N
Nuxt•2mo ago
cosbgn

useFetch `refresh` doesn't call the backend, it just return the cache v. 4.2

I have a composable like this: 
export default () => {
    const { agent_id } = useRouter()?.currentRoute?.value?.params || {} // https://github.com/nuxt/nuxt/issues/20471
    if (!agent_id || !agent_id.startsWith("ag_")){
        navigateTo("/agents")
    } 
    else {
        return useLazyFetch(`/api/agents/${agent_id}`, { 
            default:() => ({}),
            getCachedData: (key, nuxtApp, ctx) => nuxtApp?.payload?.static?.[key] ?? nuxtApp?.payload?.data?.[key]
        })
    }
}
export default () => {
    const { agent_id } = useRouter()?.currentRoute?.value?.params || {} // https://github.com/nuxt/nuxt/issues/20471
    if (!agent_id || !agent_id.startsWith("ag_")){
        navigateTo("/agents")
    } 
    else {
        return useLazyFetch(`/api/agents/${agent_id}`, { 
            default:() => ({}),
            getCachedData: (key, nuxtApp, ctx) => nuxtApp?.payload?.static?.[key] ?? nuxtApp?.payload?.data?.[key]
        })
    }
}
On a page/component I do: 
<script setup>
definePageMeta({ middleware:['auth'] })
const { data: agent, refresh } = await useAgent()
</script>
<script setup>
definePageMeta({ middleware:['auth'] })
const { data: agent, refresh } = await useAgent()
</script>
Then If I use for example <button @click='refresh()'>Refresh</button> Nothing happens, it doesn't recall the backend. Is this supposed to work this way? I thought before at least refresh skipped caching. Is there a way to skip cache?
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @cosbgn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, the issue you're experiencing is related to your custom getCachedData implementation. When you call refresh(), it's returning cached data because of how you've configured the getCachedData function. According to the Singleton Data Fetching Layer documentation, the getCachedData function now receives a context object (ctx) that includes information about what caused the request. This allows you to control when to use cached data and when to refetch. The issue with your current implementation is: 
getCachedData: (key, nuxtApp, ctx) => nuxtApp?.payload?.static?.[key] ?? nuxtApp?.payload?.data?.[key]
getCachedData: (key, nuxtApp, ctx) => nuxtApp?.payload?.static?.[key] ?? nuxtApp?.payload?.data?.[key]
This always returns cached data if it exists, regardless of whether refresh() was called. To fix this and skip the cache on manual refresh, you should check the ctx.cause property: 
getCachedData: (key, nuxtApp, ctx) => {
  // Don't use cache on manual refresh
  if (ctx.cause === 'refresh:manual') return undefined
  
  return nuxtApp?.payload?.static?.[key] ?? nuxtApp?.payload?.data?.[key]
}
getCachedData: (key, nuxtApp, ctx) => {
  // Don't use cache on manual refresh
  if (ctx.cause === 'refresh:manual') return undefined
  
  return nuxtApp?.payload?.static?.[key] ?? nuxtApp?.payload?.data?.[key]
}
The ctx.cause can be one of these values: - 'initial' - Initial fetch - 'refresh:hook' - Refresh triggered by a hook - 'refresh:manual' - Manual refresh (when you call refresh()) - 'watch' - Triggered by a watcher By returning undefined when ctx.cause === 'refresh:manual', you tell Nuxt to skip the cache and fetch fresh data from the backend. Alternatively, if you want to completely disable caching behavior, you can remove the getCachedData option entirely and let Nuxt use its default behavior, or set it to always return undefined. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@335585860764303360> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
cosbgn
cosbgnOP•2mo ago
OMG kapa has actually been useful, can't believe this day has arrived

Did you find this page helpful?