How do I type the return of an useAsyncData call in Nuxt 3

Question

How can I type the returned 'data' from a useAsyncData call that fetches some data from a pinia store?

<script setup lang="ts">
import { useSale } from "~/stores/sale";

const saleStore = useSale();

const { data: vehicle, pending } = useAsyncData<{ data: IVehicle }>(
  "vehicle",
  () => saleStore.getVehicle
);
</script>

Currently my vscode gives me the following error

No overload matches this call.
  Overload 1 of 2, '(handler: (ctx?: NuxtApp) => Promise<{ data: IVehicle; }>, options?: AsyncDataOptions<{ data: IVehicle; }, { data: IVehicle; }, KeysOf<{ data: IVehicle; }>>): AsyncData<...>', gave the following error.
  Overload 2 of 2, '(key: string, handler: (ctx?: NuxtApp) => Promise<{ data: IVehicle; }>, options?: AsyncDataOptions<{ data: IVehicle; }, { data: IVehicle; }, KeysOf<{ data: IVehicle; }>>): AsyncData<...>', gave the following error.ts(2769)
asyncData.d.ts(35, 143): The expected type comes from the return type of this signature.

Update

I tried to type it like mentioned in the comments:

const { data: vehicle, pending } = await useAsyncData<IVehicle>(
  "vehicle",
  () => saleStore.vehicle
);

But still error:

No overload matches this call.
  Overload 1 of 2, '(handler: (ctx?: NuxtApp) => Promise<IVehicle>, options?: AsyncDataOptions<IVehicle, IVehicle, KeysOf<IVehicle>>): AsyncData<...>', gave the following error.
  Overload 2 of 2, '(key: string, handler: (ctx?: NuxtApp) => Promise<IVehicle>, options?: AsyncDataOptions<IVehicle, IVehicle, KeysOf<IVehicle>>): AsyncData<...>', gave the following error.ts(2769)
asyncData.d.ts(35, 143): The expected type comes from the return type of this signature.

Unearned

Answer 1

asyncData type defined here https://nuxt.com/docs/api/composables/use-async-data#type

You can define return data type as bellow (useAsyncData<IVehicle> not useAsyncData<{ data: IVehicle }>)

const { data: vehicle, pending } = useAsyncData<IVehicle>(
  "vehicle",
  () => saleStore.getVehicle
);

Foreman

Thanks for te response! I tried it like that but still got same error. I updated my question with it. – Unearned

Answer 2

I recently had the same issue and adding types to the handler() worked for me.

const { data: vehicle, pending } = await useAsyncData(
  "vehicle",
  (): Promise<IVehicle> => saleStore.vehicle
);

Ulyanovsk

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Custodian

Answer 3

I had the exact same issue in a very similar use case with useAsyncData(). However in my instance I'm using async with a (Nuxt3) Composable that returns an async Promise.

I pieced my solution together from reading this article: https://blog.logrocket.com/async-await-in-typescript/

It seems that the approach is to forget Typing useAsyncData() and instead Type what is returned by your call within useAsyncData(). This might look something like the below.

YourComponent.vue

// Revert this line back to default syntax
const { data: vehicle, pending } = useAsyncData(
  "vehicle",
  () => saleStore.getVehicle
);

Sale.js

const useSale = async (): Promise<IVehicle> => {

  // Logic here

}

This approach has worked for me, but I'm not certain you can integrate this exact syntax with your store. You might need to experiment to find the right place within getVehicle. If you can't get it to work try pasting in some of the code from your store and I will try to help further.

Hayward