share useAsyncData state

[SimonMarx]

Environment

---

• Operating System: Linux
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-rc.1
• Package Manager: npm@8.1.0
• Builder: vite
• User Config: buildModules, modules, css, env, components, tailwindcss, meta, runtimeConfig
• Runtime Modules: -
• Build Modules: @nuxtjs/tailwindcss@5.0.3, @pinia/nuxt@0.1.8

---

Reproduction

Example using useAsyncData within a composable: https://stackblitz.com/edit/nuxt-starter-bf2vum?file=app.vue
Example using useAsyncData directly in components: https://stackblitz.com/edit/nuxt-starter-hhuack?file=app.vue

Describe the bug

Creating a state using useAsyncData within a custom composable, and using the custom composable in 2 different components does not share the state returned in {data} correctly.

One of these 2 components already has a state on SSR, while the second component has a true pending state and none data for a short time on client site rendering. When im using the composable in a component where both components are childs of that component and awaiting the fetch of the composable in the parent component, both child components do have the correct state in the same time thorugh the composable (on page load)

When i use useAsyncData directly in two components and assign the same key to useAsyncData it looks like the state is shared corrrectly.

In both examples using the refresh function within one of the components, not sharing the new collected state between these components.

Additional context

No response

Logs

No response

[SimonMarx]

I checked the useAsyncData composable.

I think the problem is while using the useAsyncData each call of that composable creates its own references for data pending error. So only the part to check if a request is already placed or if there is an init state is covered by the current useAsyncData
When i replace a part of the definition in packages/nuxt/src/app/composables/asyncData.ts:

  const asyncData = {
    data: useState(`${key}-data`, () => nuxt.payload.data['key'] ?? options.default()),
//    data: wrapInRef(nuxt.payload.data[key] ?? options.default()),
    pending: useState(`${key}-pending`, () => !useInitialCache()),
//    pending: ref(!useInitialCache()),
    error: ref(nuxt.payload._errors[key] ?? null)
  } as AsyncData<DataT, DataE>

The problems are "solved", and the states are shared instantly and correctly between components.
Maybe that helps.

[cherrymarker]

I think this is a bug. As @SimonMarx has said, for each call to useAsyncData (or children of) asyncData is generated, in the situation where a promise is still pending https://github.com/nuxt/framework/blob/d9b6c8a59bd4f1f1f6280e1d55d10ddd477d2eea/packages/nuxt/src/app/composables/asyncData.ts#L96, only the original asyncdata is updated to reflect this, all other calls which are waiting for the original call to resolve will receive no data, and will not be moved past pending.

Here is a MRE https://stackblitz.com/edit/nuxt-starter-dccie2?file=components/B.vue

I have found a good temporary fix, but the code likely needs to be redesigned slightly, I will add a pull request shortly.

[Kapcash]

@pi0 Is this issue closable since nuxt/framework#7055 has been released in rc-9?

[pi0]

Please create new issue with rc.9+ reproduction if still having issues.