useAsyncData duplicated calls

[lyric grotto]

Hello there

Still a bit new to nuxt3.
I have this composable that fetch a "config" object, containing several parameters used all over the app.

The add returns something like that :

{
  "seo":{...},
  "analytics":{...},
...
}

The composable is really simple :

export default async function(key = null) {
  const url = `/api/config`;
  const { data } = await useAsyncData(`fetch_config`, () => $fetch(url));
  return key !== null ? ref(data.value[key]):data;
}

And I use it in components, pages, nav etc...
Here let say here in cookie banner

const analytics = await useAPIConfig('analytics');

The problem i'm facing is that I have as much request as I use my composable. I'm not even sure I'm getting the payload from the SSR. I though it was suppose to be deduplicated, but I think I misunderstood how it's suppose to work.

Obviously, the config does need to be loaded once.

What am I missing ?

[lyric grotto]

Anyone have an idea ? Can I use useAsyncData in composable and expect the correct behavior ?

[polar flax]

I'm actually having the exact same issue, I tried with useFetch and a key, useAsyncData etc, my app still makes multiple requests. Hopefully someone in here knows how to deal with this

[brazen kraken]

I have similar situation, so it might help to write it here as well.

I use nested structure of component :is due to Storyblok CMS and I experience the same problem. Expected result should be to fetch data inside of AsyncData on server and on client only take them from payload, but on client it fetches once again.

[...slug.vue] - <component :is> - Page.vue
   [component :is Page.vue] - <component :is> - Hero.vue
       [component :is Hero.vue]

When I use AsyncData inside [component :is page.vue] or [component :is component.vue], it does not work