Shareable custom useAsyncData composable

I have a composable that fetches data with

useAsyncData

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

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

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

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

Nuxt•2y ago•

5 replies

bobvantpadje

Shareable custom useAsyncData composable

I have a composable that fetches data with

useAsyncData

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

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

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

useNuxtData

Shareable custom useAsyncData composable

Similar Threads

Shareable custom useAsyncData composable

Similar Threads

Similar Threads

Similar Threads