#Pending state in useLazyAsyncData when refreshing

1 messages · Page 1 of 1 (latest)

cobalt sluiceBOT
#

Hi @merry patrol. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

useLazyAsyncData’s pending ref is just an alias of computed(() => status.value === 'pending'). [pending docs]
So the key questions are:

  1. Is a new async-data entry actually being created when params changes?
    Nuxt’s async data system uses the key (here bookingsCacheKey) plus the reactive sources (e.g. watch) to decide when to refetch. There were bugs where “stale” async-data instances kept their old execute and 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 execute when 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 / bookingsCacheKey may refetch data but not correctly update status/pending, leaving pending stuck.

  2. Is the query data part of the key / reactive sources?
    A related issue with useFetch was caused by putting reactive values only in onRequest instead of in options.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 watch array.

In your code you’re already:

#
  • Building a computed key (bookingsCacheKey) that includes page, per_page, and filters.
  • Passing watch: [params].

So, based on the fixes above, the expected behavior in a recent Nuxt version is:

  • When params changes → key changes → useLazyAsyncData re‑initializes and runs the fetcher → status becomes 'pending'pending becomes true until the request resolves, while previous data is 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 for pending being stuck.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: