UseLazyAsyncData refresh behaviour
Hello, I'm using useLazyAsyncData on version 3.17.6 in pinia stores. I would like to know how the refresh is managed: on the first launch of the app the refresh is called but does nothing, on the other hand as soon as I refresh my page once, the refresh refetches the data. What could be causing this behaviour? I don't have any problems managing the fetch / status / refresh by myself.
Thanks in advance
2 Replies
Hi @Théo. 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 available knowledge sources, here’s what can be determined about the refresh behavior of
On the first launch of the app, if you use
Once you refresh the page (browser reload), the data may have been fetched (either on the server or client), so the
This behavior is due to how Nuxt manages the lifecycle of async data composables. If the data has never been fetched (e.g., on first app load with
If you want to ensure data is fetched on first use, you should either: - Set
useLazyAsyncData in Nuxt (v3.17.6):
- Initial Fetch Behavior:On the first launch of the app, if you use
useLazyAsyncData with immediate: false, the data will not be fetched until you explicitly call refresh or execute. This is by design: when immediate: false is set, Nuxt will only fetch data when the key changes (if it has already been fetched once), or when you manually trigger a refresh. If you haven't triggered a fetch yet, calling refresh will not do anything because there is no data instance to refresh yet. This is consistent with the documented behavior for both useAsyncData and useFetch as of Nuxt 4, and applies to Nuxt 3.17.x as well Key Change Behavior in useAsyncData and useFetch.
- After Page Refresh:Once you refresh the page (browser reload), the data may have been fetched (either on the server or client), so the
refresh method now has an existing data instance to work with. Therefore, calling refresh will actually refetch the data as expected.
- Why This Happens:This behavior is due to how Nuxt manages the lifecycle of async data composables. If the data has never been fetched (e.g., on first app load with
immediate: false), there is nothing to refresh. After a fetch has occurred (such as after a page reload or a manual fetch), the refresh method is able to trigger a new fetch.
- Recommendation:If you want to ensure data is fetched on first use, you should either: - Set
immediate: true (the default), or
- Manually call execute() or refresh() after setup/mount, ensuring the first fetch happens.
References:
- Key Change Behavior in useAsyncData and useFetch
- useLazyAsyncData API
If you need more granular control, you can always manage the fetch and refresh logic yourself, as you mentioned. If you’re still seeing unexpected behavior, double-check that your store/component lifecycle isn’t interfering with when the first fetch is triggered.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@198391449820200960> Kapa.ai is still learning and improving, please let me know how I did by reacting below.