Nuxt•3w ago

Typescript error when not destructuring useAsyncData

Hey there! I have multiple client requests to do in a page so I feels more convenient to not destructure the composable useLazyAsyncData().

const request = await useLazyAsyncData(() => ({}), { server: false })

const request = await useLazyAsyncData(() => ({}), { server: false })

<div v-if="request.status === 'pending' />

<div v-if="request.status === 'pending' />

But when I want to check the state in the template, I get this error:

This comparison appears to be unintentional because the types 'Ref<AsyncDataRequestStatus, AsyncDataRequestStatus>' and 'string' have no overlap

I don't get it 🤔

3 Replies

kapa.ai•3w ago

Hi @michkkael. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about the TypeScript error when not destructuring useLazyAsyncData, let's examine the issue and provide a solution based on the Nuxt documentation. The error you're encountering is due to TypeScript not being able to infer the correct type for the status property when you don't destructure the result of useLazyAsyncData. Here's how you can resolve this issue: 1. Explicitly type the result of useLazyAsyncData:

const request = await useLazyAsyncData<any, any>(() => ({}), { server: false })

const request = await useLazyAsyncData<any, any>(() => ({}), { server: false })

2. In your template, access the status as a ref:

<div v-if="request.status.value === 'pending'" />

<div v-if="request.status.value === 'pending'" />

The reason for this behavior is that useLazyAsyncData returns an object with reactive properties. The status property is actually a Ref<AsyncDataRequestStatus>, not a plain string. According to the Nuxt documentation on useAsyncData:

data, error and status are Vue refs accessible with .value in <script setup>

When you destructure the result, Nuxt's type inference works better, which is why you didn't encounter this issue when destructuring. If you prefer not to destructure, you can also consider using TypeScript's as keyword to assert the type:

const request = await useLazyAsyncData(() => ({}), { server: false }) as {
  status: Ref<AsyncDataRequestStatus>
  // ... other properties
}

const request = await useLazyAsyncData(() => ({}), { server: false }) as {
  status: Ref<AsyncDataRequestStatus>
  // ... other properties
}

Then in your template:

<div v-if="request.status.value === 'pending'" />

<div v-if="request.status.value === 'pending'" />

This approach allows you to keep your code structure while resolving the TypeScript error. Remember, the possible values for status are: 'idle', 'pending', 'success', or 'error', as mentioned in the Nuxt documentation on data fetching. By following these suggestions, you should be able to resolve the TypeScript error while maintaining your preferred code structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

michkkaelOP•3w ago

I thought .value was always omitted within a template

Gaming

Programming

Typescript error when not destructuring useAsyncData

Did you find this page helpful?