#Pending state in useLazyAsyncData when refreshing
1 messages · Page 1 of 1 (latest)
useLazyAsyncData’s pending ref is just an alias of computed(() => status.value === 'pending'). [pending docs]
So the key questions are:
-
Is a new async-data entry actually being created when
paramschanges?
Nuxt’s async data system uses the key (herebookingsCacheKey) plus the reactive sources (e.g.watch) to decide when to refetch. There were bugs where “stale” async-data instances kept their oldexecuteand didn’t see updated reactive params/refs, which were fixed by:- Re‑initialising stale async data so the fetcher doesn’t access no‑longer‑reactive params/refs. [stale async data]
- Supporting reactive keys in
useLazyAsyncData. [reactive keys] - Triggering
executewhen a non‑immediate async-data/fetch key changes. [execute on key change] - Retaining old data while refetching on computed key change. [retain data]
If you’re on a Nuxt version before these fixes, changing
params/bookingsCacheKeymay refetch data but not correctly updatestatus/pending, leavingpendingstuck. -
Is the query data part of the key / reactive sources?
A related issue withuseFetchwas caused by putting reactive values only inonRequestinstead of inoptions.query/key, which meant key changes weren’t recognized and reactivity broke. [fetch key note]
For async data, the equivalent is: make sure everything that should trigger a refetch is either:- encoded in the key (
bookingsCacheKey), and/or - included in the
watcharray.
- encoded in the key (
In your code you’re already:
- Building a computed key (
bookingsCacheKey) that includespage,per_page, and filters. - Passing
watch: [params].
So, based on the fixes above, the expected behavior in a recent Nuxt version is:
- When
paramschanges → key changes →useLazyAsyncDatare‑initializes and runs the fetcher →statusbecomes'pending'→pendingbecomestrueuntil the request resolves, while previousdatais preserved. [stale async data; retain data]
If you still see pending not toggling:
- The knowledge sources don’t provide a more specific workaround than “upgrade to a Nuxt version that includes the async-data/reactive-key fixes” and ensure your params that should trigger refetch are part of the key or
watch. They do not describe any other known cause forpendingbeing stuck.