fix(nuxt): reuse asyncData promise with existing key

packages/nuxt/src/app/composables/asyncData.ts

@@ -85,19 +85,30 @@ export function useAsyncData<
 
   const useInitialCache = () => options.initialCache && nuxt.payload.data[key] !== undefined
 
-  const asyncData = {
+  let asyncData = {
     data: wrapInRef(nuxt.payload.data[key] ?? options.default()),
     pending: ref(!useInitialCache()),
     error: ref(nuxt.payload._errors[key] ?? null)
   } as AsyncData<DataT, DataE>
 
+  // If this query is pending, grab async data from store
+  // Otherwise, set our async data
+  if (nuxt._asyncDataPromises[key]) {
+    asyncData = nuxt._pendingAsyncData[key]
+  } else {
+    nuxt._pendingAsyncData[key] = asyncData
+  }
+
   asyncData.refresh = (opts = {}) => {
     // Avoid fetching same key more than once at a time
     if (nuxt._asyncDataPromises[key]) {
       return nuxt._asyncDataPromises[key]
     }
     // Avoid fetching same key that is already fetched
     if (opts._initial && useInitialCache()) {
+      // Prevent memory leak, no promise to resolve so key is never deleted
+      delete nuxt._pendingAsyncData[key]
+
       return nuxt.payload.data[key]
     }
     asyncData.pending.value = true
@@ -125,6 +136,7 @@ export function useAsyncData<
           nuxt.payload._errors[key] = true
         }
         delete nuxt._asyncDataPromises[key]
+        delete nuxt._pendingAsyncData[key]
       })
     return nuxt._asyncDataPromises[key]
   }
@@ -167,6 +179,7 @@ export function useAsyncData<
 
   // Allow directly awaiting on asyncData
   const asyncDataPromise = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => asyncData) as AsyncData<DataT, DataE>
+
   Object.assign(asyncDataPromise, asyncData)
 
   return asyncDataPromise as AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE>

packages/nuxt/src/app/nuxt.ts

@@ -5,6 +5,7 @@ import { createHooks, Hookable } from 'hookable'
 import type { RuntimeConfig } from '@nuxt/schema'
 import { getContext } from 'unctx'
 import { legacyPlugin, LegacyContext } from './compat/legacy-app'
+import { AsyncData } from './composables/asyncData'
 
 const nuxtAppCtx = getContext<NuxtApp>('nuxt-app')
 
@@ -46,6 +47,7 @@ interface _NuxtApp {
   [key: string]: any
 
   _asyncDataPromises?: Record<string, Promise<any>>
+  _pendingAsyncData?: Record<string, AsyncData<any, any>>
   _legacyContext?: LegacyContext
 
   ssrContext?: Record<string, any> & {
@@ -91,6 +93,7 @@ export function createNuxtApp (options: CreateOptions) {
     }),
     isHydrating: process.client,
     _asyncDataPromises: {},
+    _pendingAsyncData: {},
     ...options
   } as any as NuxtApp