From ec72066f91c806601d9c16d04b31553a12ae2776 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 5 Jun 2023 19:36:26 +0100
Subject: [PATCH] fix(nuxt): key distinct pages differently for legacy
 asyncData (#21263)

---
 .../nuxt/src/app/composables/component.ts     |  9 +++++---
 packages/schema/src/config/build.ts           |  1 +
 test/basic.test.ts                            | 21 ++++++++++++++++++-
 .../basic/pages/legacy/async-data.vue         |  4 +++-
 .../basic/pages/legacy/async-data/index.vue   | 16 ++++++++++++++
 .../pages/legacy/async-data/index/index.vue   | 13 ++++++++++++
 6 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 test/fixtures/basic/pages/legacy/async-data/index.vue
 create mode 100644 test/fixtures/basic/pages/legacy/async-data/index/index.vue

diff --git a/packages/nuxt/src/app/composables/component.ts b/packages/nuxt/src/app/composables/component.ts
index 886ae183ce..0b7ae3c99e 100644
--- a/packages/nuxt/src/app/composables/component.ts
+++ b/packages/nuxt/src/app/composables/component.ts
@@ -13,8 +13,9 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
   const nuxtApp = useNuxtApp()
   const route = useRoute()
   const vm = getCurrentInstance()!
-  const { fetchKey } = vm.proxy!.$options
-  const key = typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey || route.fullPath
+  const { fetchKey, _fetchKeyBase } = vm.proxy!.$options
+  const key = (typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey) ||
+    ([_fetchKeyBase, route.fullPath, route.matched.findIndex(r => Object.values(r.components || {}).includes(vm.type))].join(':'))
   const { data, error } = await useAsyncData(`options:asyncdata:${key}`, () => nuxtApp.runWithContext(() => fn(nuxtApp)))
   if (error.value) {
     throw createError(error.value)
@@ -27,7 +28,8 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
 }
 
 export const defineNuxtComponent: typeof defineComponent =
-  function defineNuxtComponent (options: any): any {
+  function defineNuxtComponent (...args: any[]): any {
+    const [options, key] = args
     const { setup } = options
 
     // Avoid wrapping if no options api is used
@@ -40,6 +42,7 @@ export const defineNuxtComponent: typeof defineComponent =
 
     return {
       [NuxtComponentIndicator]: true,
+      _fetchKeyBase: key,
       ...options,
       setup (props, ctx) {
         const nuxtApp = useNuxtApp()
diff --git a/packages/schema/src/config/build.ts b/packages/schema/src/config/build.ts
index 9c72526734..4dd1c18d43 100644
--- a/packages/schema/src/config/build.ts
+++ b/packages/schema/src/config/build.ts
@@ -146,6 +146,7 @@ export default defineUntypedSchema({
      */
     keyedComposables: {
       $resolve: (val) => [
+        { name: 'defineNuxtComponent', argumentLength: 2 },
         { name: 'useState', argumentLength: 2 },
         { name: 'useFetch', argumentLength: 3 },
         { name: 'useAsyncData', argumentLength: 3 },
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 8bd0f411bd..f4f1c7e138 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -578,8 +578,27 @@ describe('legacy async data', () => {
   it('should work with defineNuxtComponent', async () => {
     const html = await $fetch('/legacy/async-data')
     expect(html).toContain('<div>Hello API</div>')
+    expect(html).toContain('<div>fooChild</div>')
+    expect(html).toContain('<div>fooParent</div>')
     const { script } = parseData(html)
-    expect(script.data['options:asyncdata:/legacy/async-data'].hello).toEqual('Hello API')
+    expect(script.data['options:asyncdata:hello'].hello).toBe('Hello API')
+    expect(Object.values(script.data)).toMatchInlineSnapshot(`
+      [
+        {
+          "baz": "qux",
+          "foo": "bar",
+        },
+        {
+          "hello": "Hello API",
+        },
+        {
+          "fooParent": "fooParent",
+        },
+        {
+          "fooChild": "fooChild",
+        },
+      ]
+    `)
   })
 })
 
diff --git a/test/fixtures/basic/pages/legacy/async-data.vue b/test/fixtures/basic/pages/legacy/async-data.vue
index 8b36739185..5b3ccdbcf3 100644
--- a/test/fixtures/basic/pages/legacy/async-data.vue
+++ b/test/fixtures/basic/pages/legacy/async-data.vue
@@ -1,11 +1,13 @@
 <template>
   <div>
-    {{ hello }}
+    <div>{{ hello }}</div>
+    <NuxtPage />
   </div>
 </template>
 
 <script>
 export default defineNuxtComponent({
+  fetchKey: () => 'hello',
   async setup () {
     await nextTick()
     useRuntimeConfig()
diff --git a/test/fixtures/basic/pages/legacy/async-data/index.vue b/test/fixtures/basic/pages/legacy/async-data/index.vue
new file mode 100644
index 0000000000..06acfd70f0
--- /dev/null
+++ b/test/fixtures/basic/pages/legacy/async-data/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <div>{{ fooParent }}</div>
+    <NuxtPage />
+  </div>
+</template>
+
+<script>
+export default defineNuxtComponent({
+  asyncData () {
+    return {
+      fooParent: 'fooParent'
+    }
+  }
+})
+</script>
diff --git a/test/fixtures/basic/pages/legacy/async-data/index/index.vue b/test/fixtures/basic/pages/legacy/async-data/index/index.vue
new file mode 100644
index 0000000000..3458ec88db
--- /dev/null
+++ b/test/fixtures/basic/pages/legacy/async-data/index/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>{{ fooChild }}</div>
+</template>
+
+<script>
+export default defineNuxtComponent({
+  asyncData () {
+    return {
+      fooChild: 'fooChild'
+    }
+  }
+})
+</script>