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

6 messages · Page 1 of 1 (latest)

quartz jungle
#

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]
        })
    }
}

On a page/component I do:

<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?

hollow scaffoldBOT
#

Hi @quartz jungle. 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]

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]
}

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:

#

@quartz jungle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

quartz jungle
#

OMG kapa has actually been useful, can't believe this day has arrived

storm vapor
#

Oh golly