Async function for `useAsyncData` key param

Hello, I have a composable that returns

useAsyncData

useAsyncData

and want to do something like this

export const useSomeHook = () =>  {
  return useAsyncData(
    () => $fetch('some-endpoint-that-fetches-keys'),
    async () => {
      // do some fetch here
    }
  )
}

export const useSomeHook = () =>  {
  return useAsyncData(
    () => $fetch('some-endpoint-that-fetches-keys'),
    async () => {
      // do some fetch here
    }
  )
}

In other words, I want to set the key to some value fetched async, but if I make the composable async, the return type will always need to be a promise, which is not equivilent to

useAsyncData

useAsyncData

's type signature:

function useAsyncData<DataT, DataE>(
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT, DataE>
function useAsyncData<DataT, DataE>(
  key: string,
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT, DataE>>

function useAsyncData<DataT, DataE>(
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT, DataE>
function useAsyncData<DataT, DataE>(
  key: string,
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT, DataE>>

Can anyone think of a clean way to do this?

Nuxt•15mo ago•

4 replies

Async function for `useAsyncData` key param

Hello, I have a composable that returns

useAsyncData

useAsyncData

and want to do something like this

export const useSomeHook = () =>  {
  return useAsyncData(
    () => $fetch('some-endpoint-that-fetches-keys'),
    async () => {
      // do some fetch here
    }
  )
}

export const useSomeHook = () =>  {
  return useAsyncData(
    () => $fetch('some-endpoint-that-fetches-keys'),
    async () => {
      // do some fetch here
    }
  )
}

In other words, I want to set the key to some value fetched async, but if I make the composable async, the return type will always need to be a promise, which is not equivilent to

useAsyncData

useAsyncData

's type signature:

function useAsyncData<DataT, DataE>(
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT, DataE>
function useAsyncData<DataT, DataE>(
  key: string,
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT, DataE>>

function useAsyncData<DataT, DataE>(
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT, DataE>
function useAsyncData<DataT, DataE>(
  key: string,
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): Promise<AsyncData<DataT, DataE>>

Can anyone think of a clean way to do this?

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Nuxt

Nuxt Community Chat Server

31,632 Members

Join

Async function for `useAsyncData` key param

Async function for `useAsyncData` key param

Continue the conversation

Nuxt

Continue the conversation

Nuxt

Similar Threads