From f4d67a9bcdb7e9dd26b4aecc470a702546b5f44a Mon Sep 17 00:00:00 2001
From: warflash <nwiesinger67@gmail.com>
Date: Mon, 16 Oct 2023 21:20:02 +0200
Subject: [PATCH] fix(nuxt): refetch both undefined/null values in
 `useAsyncData` (#23351)

---
 packages/nuxt/src/app/composables/asyncData.ts    |  6 ++++--
 test/basic.test.ts                                |  6 ++++++
 .../basic/pages/useAsyncData/nuxt-data.vue        | 15 +++++++++++++++
 test/nuxt/composables.test.ts                     | 14 ++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 test/fixtures/basic/pages/useAsyncData/nuxt-data.vue

diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
index 25d39dc49d..eff2d725b9 100644
--- a/packages/nuxt/src/app/composables/asyncData.ts
+++ b/packages/nuxt/src/app/composables/asyncData.ts
@@ -143,7 +143,9 @@ export function useAsyncData<
   const nuxt = useNuxtApp()
 
   const getCachedData = () => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]
-  const hasCachedData = () => getCachedData() !== undefined
+  const hasCachedData = () => ![null, undefined].includes(
+    nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]
+  )
 
   // Create or use a shared asyncData entity
   if (!nuxt._asyncData[key] || !options.immediate) {
@@ -253,7 +255,7 @@ export function useAsyncData<
       }
     }
 
-    if (fetchOnServer && nuxt.isHydrating && hasCachedData()) {
+    if (asyncData.error.value || (fetchOnServer && nuxt.isHydrating && hasCachedData())) {
       // 1. Hydration (server: true): no fetch
       asyncData.pending.value = false
       asyncData.status.value = asyncData.error.value ? 'error' : 'success'
diff --git a/test/basic.test.ts b/test/basic.test.ts
index e3e27c933d..b15c84b74d 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -1925,6 +1925,12 @@ describe.skipIf(process.env.TEST_CONTEXT !== 'async')('Async context', () => {
 })
 
 describe.skipIf(isWindows)('useAsyncData', () => {
+  it('works after useNuxtData call', async () => {
+    const page = await createPage('/useAsyncData/nuxt-data')
+    expect(await page.locator('body').getByText('resolved:true').textContent()).toContain('resolved:true')
+    await page.close()
+  })
+
   it('single request resolves', async () => {
     await expectNoClientErrors('/useAsyncData/single')
   })
diff --git a/test/fixtures/basic/pages/useAsyncData/nuxt-data.vue b/test/fixtures/basic/pages/useAsyncData/nuxt-data.vue
new file mode 100644
index 0000000000..f661a6b5d9
--- /dev/null
+++ b/test/fixtures/basic/pages/useAsyncData/nuxt-data.vue
@@ -0,0 +1,15 @@
+<template>
+  <div
+    v-if="!pending"
+    v-text="'resolved:' + data.resolved"
+  />
+  <div
+    v-else
+    v-text="'loading'"
+  />
+</template>
+
+<script setup>
+useNuxtData('call')
+const { data, pending } = await useAsyncData('call', () => Promise.resolve({ resolved: true }), { server: false })
+</script>
diff --git a/test/nuxt/composables.test.ts b/test/nuxt/composables.test.ts
index ef219e372d..abdba10556 100644
--- a/test/nuxt/composables.test.ts
+++ b/test/nuxt/composables.test.ts
@@ -143,6 +143,20 @@ describe('useAsyncData', () => {
     expect(useNuxtData('key').data.value).toBeUndefined()
   })
 
+  it('should be usable _after_ a useNuxtData call', async () => {
+    useNuxtApp().payload.data.call = null
+    const { data: cachedData } = useNuxtData('call')
+    expect(cachedData.value).toMatchInlineSnapshot('null')
+    const { data } = await useAsyncData('call', () => Promise.resolve({ resolved: true }), { server: false })
+    expect(cachedData.value).toMatchInlineSnapshot(`
+      {
+        "resolved": true,
+      }
+    `)
+    expect(data.value).toEqual(cachedData.value)
+    clearNuxtData('call')
+  })
+
   it('should be refreshable', async () => {
     await useAsyncData('key', () => Promise.resolve('test'))
     clearNuxtData('key')