Nuxt•2w ago

useAsyncData with possibly null or undefined key

I would like to know what is your approach when using

useAsyncData

useAsyncData

useAsyncData

useAsyncData with a key whose value is reactive/computed and at some point can be null or undefined.

The problem I am facing is that I want to load a list of things which is dependent of a context. When this context changes I want to reload the list of things.
The issue is the context may be undefined at first as it is also fetched from the API.

The current behaviour I am seeing is that the call to fetch the list of things is performed twice at least.
I would like to only trigger a call to fetch the list of things when the context has a value (truthy) and when it changes.

kapa.ai•12/14/25, 9:47 PM

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

kapa.ai•12/14/25, 9:47 PM

----------------------
The knowledge sources don’t describe an official pattern specifically for “key can be null/undefined, and I only want to fetch when it’s truthy”, but they do show how

useAsyncData

useAsyncData

behaves with reactive keys and watchers. In particular:

```
useAsyncData
```
```
useAsyncData
```
supports reactive keys (e.g. a computed getter) and reacts when that key changes. [reactive keys]
When the key changes, Nuxt now preserves existing data while fetching new data, and avoids duplicate executions. [retain data on key change; prevent duplicate execute]
watchwatch in
```
useAsyncData
```
```
useAsyncData
```
works like a Vue watcher: you typically watch refs/computeds, not raw properties of reactive objects. [watch with computed]

Given that, the pattern that fits your requirement (only fetch when context is truthy, and refetch when it changes) is to:

Use a reactive key that is nullnull/
```
undefined
```
```
undefined
```
when you don’t want to fetch.
Use the
```
enabled
```
```
enabled
```
/readyready-style control (called readyready in the PR) or a watchwatch option to gate execution until the context is valid. However, the exact public API name (
```
enabled
```
```
enabled
```
vs readyready) is only discussed in PRs and not fully documented in the sources, so I can’t state the final option name with certainty. [enabled/ready option]

Because the docs for this pattern are not in the provided sources, I can’t give you a fully authoritative code sample, but conceptually it would look like:

``ts
const context = ref<YourContextType | null>(null)

const key = computed(() => context.value ?

``ts
const context = ref<YourContextType | null>(null)

const key = computed(() => context.value ?

things-${context.value.id}` : null)

kapa.ai•12/14/25, 9:47 PM

const { data, pending, error } = await useAsyncData(
key, // reactive key, becomes non-null only when context is ready
() => $fetch(/api/things?contextId=${context.value!.id}/api/things?contextId=${context.value!.id}),
{
// Pseudo‑option name; PR calls it readyready, issue calls it

enabled

enabled

// Use the actual name from your Nuxt version’s docs:
ready: computed(() => !!context.value)
// or watch: [() => context.value] if you just want to refetch on change
}
)

``

Key points, based on the sources:

- Using a **computed key** is supported and Nuxt handles key changes correctly, including preserving old data while new data is fetched. [[reactive keys](<https://github.com/nuxt/nuxt/pull/32092>); [retain data on key change](<https://github.com/nuxt/nuxt/pull/32616>)]
- When you use

``

Key points, based on the sources:

- Using a **computed key** is supported and Nuxt handles key changes correctly, including preserving old data while new data is fetched. [[reactive keys](<https://github.com/nuxt/nuxt/pull/32092>); [retain data on key change](<https://github.com/nuxt/nuxt/pull/32616>)]
- When you use

watch in in useAsyncData, you should pass **refs/computeds**, not raw reactive properties (e.g. use , you should pass **refs/computeds**, not raw reactive properties (e.g. use computed(() => route.query) instead of instead of route.query

). [[watch with computed](<https://stackoverflow.com/questions/77508033>)]

So the general approach is:

- Represent your “context” as a ref/computed.
- Derive a **reactive key** from it that is only non-null when the context is valid.
- Use

). [[watch with computed](<https://stackoverflow.com/questions/77508033>)]

So the general approach is:

- Represent your “context” as a ref/computed.
- Derive a **reactive key** from it that is only non-null when the context is valid.
- Use

watch

ready

enabled

-style options to ensure execution only happens when the context is truthy and then whenever it changes.

Because the exact public option name for “only execute when ready” is not confirmed in the provided sources, you’ll need to check your Nuxt version’s

-style options to ensure execution only happens when the context is truthy and then whenever it changes.

Because the exact public option name for “only execute when ready” is not confirmed in the provided sources, you’ll need to check your Nuxt version’s

useAsyncData` docs for the final option name and usage.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/14/25, 9:47 PM

@399242431507202049 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useAsyncData with possibly null or undefined key

Similar Threads

Similar Threads

Similar Threads