Async Data Caching
I have a question for y'all. What's the expected behavior of the following?
useAsyncData(key, async () => { ... }, {
immediate: false,
watch: [trigger],
getCachedData: (key, nuxtApp) => {
return nuxtApp.payload.data[key] || nuxtApp.static.data[key];
}
});
I expect the cache to be used, if available, at every trigger call, but that does not seem to be the case. It seems like its never used and the async data handler gets called every time.
2 Replies
Hi @Revadike. 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, I can explain the expected behavior of your
useAsyncData implementation.
When using useAsyncData with the options you've specified:
Here's what's happening:
1. The immediate: false option prevents the request from firing immediately when the component is mounted.
2. The watch: [trigger] option means the async function will run whenever the trigger reactive source changes.
3. Your custom getCachedData function is attempting to retrieve cached data from either nuxtApp.payload.data[key] or nuxtApp.static.data[key].
The issue you're experiencing where the async data handler gets called every time instead of using the cache is likely because:
1. The cache is only populated during server-side rendering and hydration. As mentioned in the useNuxtApp documentation, the payload data is primarily used to pass data from server to client during initial hydration.
2. When you trigger a refetch on the client side through the watch array, it doesn't check the cache again - it executes a new fetch. This is by design, as the watch functionality is meant to refresh data when dependencies change.
3. The default getCachedData implementation only returns cached data "when experimental.payloadExtraction of nuxt.config is enabled" as mentioned in the useAsyncData documentation.
If you want to implement caching for subsequent client-side fetches, you might need to implement a custom caching mechanism or use useNuxtData to access previously fetched data with the same key.
For example, you could use the useNuxtData composable to check if data with your key already exists before triggering a new fetch, as shown in the useNuxtData documentation.
Note that there have been several improvements to async data handling in recent Nuxt versions, including fixes for default value behavior and ensuring single synced asyncdata instances per key, as indicated by some of the pull requests in the knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@172781195329798144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.