Nuxt•11mo ago

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
    }
  )
}

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>>

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?

kapa.ai•1/28/25, 12:33 PM

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

kapa.ai•1/28/25, 12:33 PM

----------------------
Based on the knowledge sources provided, there isn't a direct way to use an asynchronous function for the keykey parameter of

useAsyncData

useAsyncData

while maintaining its return type. However, I can suggest a potential workaround that might help you achieve a similar result.

Instead of trying to make the keykey parameter asynchronous, you could use a combination of refref and watchwatch to update the key after it's fetched. Here's an approach you could consider:

import { ref, watch } from 'vue'
import { useAsyncData } from 'nuxt/app'

export const useSomeHook = () => {
  const keyRef = ref('initial-key')

  const asyncData = useAsyncData(
    () => keyRef.value,
    async () => {
      // do some fetch here
    },
    {
      watch: [keyRef]
    }
  )

  // Fetch the key asynchronously
  $fetch('some-endpoint-that-fetches-keys').then(fetchedKey => {
    keyRef.value = fetchedKey
  })

  return asyncData
}

import { ref, watch } from 'vue'
import { useAsyncData } from 'nuxt/app'

export const useSomeHook = () => {
  const keyRef = ref('initial-key')

  const asyncData = useAsyncData(
    () => keyRef.value,
    async () => {
      // do some fetch here
    },
    {
      watch: [keyRef]
    }
  )

  // Fetch the key asynchronously
  $fetch('some-endpoint-that-fetches-keys').then(fetchedKey => {
    keyRef.value = fetchedKey
  })

  return asyncData
}

In this approach:

We create a refref with an initial key value.
We use this refref as the key for
```
useAsyncData
```
```
useAsyncData
```
.
We add the keyRefkeyRef to the watchwatch option of
```
useAsyncData
```
```
useAsyncData
```
. This ensures that when the key changes, the data will be refetched.
After setting up
```
useAsyncData
```
```
useAsyncData
```
, we fetch the actual key asynchronously and update the keyRefkeyRef when it's received.

This method allows you to keep the return type of

useAsyncData

useAsyncData

while still fetching the key asynchronously. The data will be refetched once the actual key is received and set.

Note that this approach has some limitations:

The initial fetch will happen with the initial key value.
There will be a second fetch when the actual key is received.

If these limitations are acceptable for your use case, this could be a viable solution.

kapa.ai•1/28/25, 12:33 PM

For more information on the watchwatch option and how it can be used with

useAsyncData

useAsyncData

, you can refer to the Nuxt documentation on Data Fetching.

Remember that this is a workaround and not a direct solution to using an async function for the key parameter. The Nuxt team is continuously improving the framework, so it's worth keeping an eye on future updates that might provide more direct solutions for this use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•1/28/25, 12:33 PM

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

Async function for `useAsyncData` key param

Similar Threads

Similar Threads

Similar Threads