N
Nuxt•3d ago
Nezuko

getCachedData Not Working

Hi could some give me help getCachedData stopped working and i also disabled purgeCachedData and still doesnt work 
const getCurvasCarga = async (cpe: string, data_inicio: string, data_fim: string) => {
        const token = await getAccessTokenSilently();

        return useFetch<any>(`${config.public.apiUrl}curvas-carga`, {
            method: 'GET',
            server: false,
            headers: {
                Authorization: `Bearer ${token}`,
            },
            query: {
                cpe,
                data_inicio,
                data_fim
            },
            getCachedData(key: any) {
                return nuxtApp.payload.data[key] || nuxtApp.static.data[key];
            },
            key: `curvas-carga-${cpe}-${data_inicio}-${data_fim}`,
        });
    };
const getCurvasCarga = async (cpe: string, data_inicio: string, data_fim: string) => {
        const token = await getAccessTokenSilently();

        return useFetch<any>(`${config.public.apiUrl}curvas-carga`, {
            method: 'GET',
            server: false,
            headers: {
                Authorization: `Bearer ${token}`,
            },
            query: {
                cpe,
                data_inicio,
                data_fim
            },
            getCachedData(key: any) {
                return nuxtApp.payload.data[key] || nuxtApp.static.data[key];
            },
            key: `curvas-carga-${cpe}-${data_inicio}-${data_fim}`,
        });
    };
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @GamerPedro4K. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're using a custom getCachedData function with useFetch, but it's not working as expected—even after disabling purgeCachedData. Here are some key points and troubleshooting steps based on the latest Nuxt documentation and recent changes: 1. getCachedData Context and Usage - In recent Nuxt versions, the getCachedData function receives a third argument: a context object (ctx) that includes the cause of the request (e.g., 'initial', 'refresh:manual', etc.). If you don't handle this, your cache might not work as intended, especially on manual refreshes or reactivity triggers. - Example from the docs: 
  getCachedData(key, nuxtApp, ctx) {
    // ctx.cause - can be 'initial' | 'refresh:hook' | 'refresh:manual' | 'watch'
    if (ctx.cause === 'refresh:manual') return undefined
    return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  }
  
  getCachedData(key, nuxtApp, ctx) {
    // ctx.cause - can be 'initial' | 'refresh:hook' | 'refresh:manual' | 'watch'
    if (ctx.cause === 'refresh:manual') return undefined
    return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  }
This ensures that on a manual refresh, the cache is bypassed and fresh data is fetched. If you omit the ctx parameter, your function may not be called correctly in all scenarios Singleton Data Fetching Layer. 2. granularCachedData Experimental Flag - By default, Nuxt only uses getCachedData on the initial fetch. To ensure it is called on every refresh (manual, watch, etc.), you must enable the granularCachedData experimental feature in your nuxt.config.ts: 
  export default defineNuxtConfig({
    experimental: {
      granularCachedData: true
    }
  })
  
  export default defineNuxtConfig({
    experimental: {
      granularCachedData: true
    }
  })
purgeCachedData and granularCachedData 3. Option Consistency - If you use the same key for multiple useFetch calls, all options (including getCachedData) must be consistent. Otherwise, Nuxt will warn or behave unexpectedly Singleton Data Fetching Layer. 4. Disabling purgeCachedData - Disabling purgeCachedData only prevents Nuxt from automatically clearing cached data. It does not affect when or how getCachedData is called purgeCachedData. 5. Example Fix Update your getCachedData to accept the third ctx argument, and enable granularCachedData: 
// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    granularCachedData: true,
    purgeCachedData: false // optional, if you want to keep cache longer
  }
})

// In your composable
const getCurvasCarga = async (cpe: string, data_inicio: string, data_fim: string) => {
  const token = await getAccessTokenSilently();

  return useFetch<any>(`${config.public.apiUrl}curvas-carga`, {
    method: 'GET',
    server: false,
    headers: {
      Authorization: `Bearer ${token}`,
    },
    query: {
      cpe,
      data_inicio,
      data_fim
    },
    getCachedData(key, nuxtApp, ctx) {
      // Optionally, handle ctx.cause to control cache usage
      if (ctx.cause === 'refresh:manual') return undefined
      return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
    },
    key: `curvas-carga-${cpe}-${data_inicio}-${data_fim}`,
  });
};
// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    granularCachedData: true,
    purgeCachedData: false // optional, if you want to keep cache longer
  }
})

// In your composable
const getCurvasCarga = async (cpe: string, data_inicio: string, data_fim: string) => {
  const token = await getAccessTokenSilently();

  return useFetch<any>(`${config.public.apiUrl}curvas-carga`, {
    method: 'GET',
    server: false,
    headers: {
      Authorization: `Bearer ${token}`,
    },
    query: {
      cpe,
      data_inicio,
      data_fim
    },
    getCachedData(key, nuxtApp, ctx) {
      // Optionally, handle ctx.cause to control cache usage
      if (ctx.cause === 'refresh:manual') return undefined
      return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
    },
    key: `curvas-carga-${cpe}-${data_inicio}-${data_fim}`,
  });
};
Summary - Make sure your getCachedData function uses the correct signature (with ctx). - Enable granularCachedData in your config. - Ensure all options are consistent for the same key. If you follow these steps and it still doesn't work, there may be a bug or regression in your Nuxt version. In that case, check for related issues or updates in the Nuxt repository. References:
Singleton Data Fetching Layer
purgeCachedData and granularCachedData ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@537544951005839376> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?