Cached HTTP requests when using useAsyncData with pnpm as package manager?
I discovered a bug where our http requests to our backend wrapped with useAsyncData all use the same cached body from the first time the api is called until the page is reloaded and this only happens when the packages are installed and the app is run with pnpm. This stops happening when we remove useAsyncData or add a key, can anyone help me from going insane because of this bug?
2 Replies
Hi @td2t. 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 provided knowledge sources, the behavior you're experiencing with useAsyncData caching the same HTTP response body until a page reload—especially when not providing a unique key—aligns with how Nuxt's data fetching system is designed to work, regardless of the package manager (pnpm, npm, yarn).
Key Points from the Documentation:
- Caching and Keys: useAsyncData uses a key to cache and deduplicate requests. If you do not provide a key, Nuxt auto-generates one based on the file and line number. If multiple calls to useAsyncData share the same key (or lack a unique key), they will share the same cached data, which can lead to stale or incorrect data being reused across requests or components. This is by design for performance and consistency, but can cause issues if your data needs to be unique per request or context. The recommended solution is to always provide a unique key, especially in dynamic contexts or when wrapping useAsyncData in custom composables Docs: useAsyncData Docs: Data Fetching.
- Shared State: All calls to useAsyncData or useFetch with the same key share the same data, error, and status refs. This is true regardless of the package manager used Upgrade Guide: Singleton Data Fetching Layer.
- Package Manager Irrelevance: There is no mention in the official documentation or changelogs of pnpm specifically affecting Nuxt's data caching behavior. The caching logic is internal to Nuxt and should behave the same across npm, yarn, or pnpm, unless there is a rare edge case with module resolution or hoisting, which is not documented here.
- Workaround: As you discovered, providing a unique key to useAsyncData (for example, based on route params or other unique identifiers) ensures that each request is cached and managed independently, preventing the reuse of stale data Docs: useAsyncData.
Summary:
The behavior you are seeing is expected if you do not provide a unique key to useAsyncData. This is not specific to pnpm, but rather how Nuxt's caching system works. Always provide a unique key to avoid unwanted data sharing. If you are still seeing different behavior only with pnpm, and not with npm/yarn, and you have ruled out all other causes, it may be worth opening an issue with a reproducible example, but the knowledge sources do not indicate any known pnpm-specific bug. References:
See the official documentation for more on keys and caching:
- useAsyncData: Reactive Keys - Data Fetching: Caching and Refetching - Upgrade Guide: Singleton Data Fetching Layer ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
The behavior you are seeing is expected if you do not provide a unique key to useAsyncData. This is not specific to pnpm, but rather how Nuxt's caching system works. Always provide a unique key to avoid unwanted data sharing. If you are still seeing different behavior only with pnpm, and not with npm/yarn, and you have ruled out all other causes, it may be worth opening an issue with a reproducible example, but the knowledge sources do not indicate any known pnpm-specific bug. References:
See the official documentation for more on keys and caching:
- useAsyncData: Reactive Keys - Data Fetching: Caching and Refetching - Upgrade Guide: Singleton Data Fetching Layer ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@413148786836373544> Kapa.ai is still learning and improving, please let me know how I did by reacting below.