How to infer the type from `useAsyncData`?

I am getting a list of products through

api

api

endpoint. Using

useAsyncData

useAsyncData

it knows what it will be returning, which is great!

However, I want to know which product is currently being viewed/selected and I want to give that

ref

ref

a type that is infered from this

data

data

const selectedProduct = shallowRef<typeof products.value>()
const { data: products } = await useAsyncData('products', () =>
  $fetch('/api/products'),
)

const selectedProduct = shallowRef<typeof products.value>()
const { data: products } = await useAsyncData('products', () =>
  $fetch('/api/products'),
)

Here's the thing tho, I want to make that type a single item, not an array of items. But I have no ideas how to unwrap this infered type from Simplify and SerializeObject.

const selectedProduct: ShallowRef<Simplify<SerializeObject<{
    id: number;
    price: number;
    checkoutId: string | undefined;
    recurrence: string;
    label: string;
    description: string;
}>[] | undefined> | null>

const selectedProduct: ShallowRef<Simplify<SerializeObject<{
    id: number;
    price: number;
    checkoutId: string | undefined;
    recurrence: string;
    label: string;
    description: string;
}>[] | undefined> | null>

Help is greatly appreciated!

Nuxt•2y ago•

7 replies

Nenad Novakovic

How to infer the type from `useAsyncData`?

I am getting a list of products through

api

api

endpoint. Using

useAsyncData

useAsyncData

it knows what it will be returning, which is great!

However, I want to know which product is currently being viewed/selected and I want to give that

ref

ref

a type that is infered from this

data

data

const selectedProduct = shallowRef<typeof products.value>()
const { data: products } = await useAsyncData('products', () =>
  $fetch('/api/products'),
)

const selectedProduct = shallowRef<typeof products.value>()
const { data: products } = await useAsyncData('products', () =>
  $fetch('/api/products'),
)

Here's the thing tho, I want to make that type a single item, not an array of items. But I have no ideas how to unwrap this infered type from Simplify and SerializeObject.

const selectedProduct: ShallowRef<Simplify<SerializeObject<{
    id: number;
    price: number;
    checkoutId: string | undefined;
    recurrence: string;
    label: string;
    description: string;
}>[] | undefined> | null>

const selectedProduct: ShallowRef<Simplify<SerializeObject<{
    id: number;
    price: number;
    checkoutId: string | undefined;
    recurrence: string;
    label: string;
    description: string;
}>[] | undefined> | null>

Help is greatly appreciated!

How to infer the type from `useAsyncData`?

Similar Threads

How to infer the type from `useAsyncData`?

Similar Threads

Similar Threads

Similar Threads