NuxtN
Nuxt•16mo ago
bobvantpadje

Shareable custom useAsyncData composable

I have a composable that fetches data with useAsyncData . I would like to reuse this composable in other components. So that would look something like this: 

// useCustomAsyncData.ts
export function useCustomAsyncData() {
  return useAsyncData('key', () => { // fetch data here})
}

// component one 
const { data } = useCustomAsyncData()

// component two
const { data } = useCustomAsyncData()


If I understand correctly, useAsyncData should memoize it's value. So, I expected that the fetching data inside useAsyncData would only be called once. However, this doesn't seem to be the case and the fetching data gets called twice.

Am I missing something here? I understand that I could get the cached value with useNuxtData inside the second component. But Ideally I would have one composable that's smart enough to either fetch the data or retrieve it from the cache.

I have a Codesandbox with a POC here to show what I'm exactly trying to do
Was this page helpful?