From a2f20fcb039b6678398ee6a29fe10791875391c3 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Thu, 15 Sep 2022 19:52:16 +0200
Subject: [PATCH 1/3] feat(nuxt): `useData` composable

---
 packages/nuxt/src/app/composables/data.ts  | 29 ++++++++++++++++++++++
 packages/nuxt/src/app/composables/index.ts |  1 +
 packages/nuxt/src/imports/presets.ts       |  1 +
 test/fixtures/basic/composables/random.ts  |  7 ++++--
 test/fixtures/basic/pages/random/[id].vue  |  4 +--
 5 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 packages/nuxt/src/app/composables/data.ts

diff --git a/packages/nuxt/src/app/composables/data.ts b/packages/nuxt/src/app/composables/data.ts
new file mode 100644
index 00000000000..5c71a0210e9
--- /dev/null
+++ b/packages/nuxt/src/app/composables/data.ts
@@ -0,0 +1,29 @@
+import { toRef } from 'vue'
+import type { Ref } from 'vue'
+import { useNuxtApp } from '../nuxt'
+
+/**
+ * Create a global reactive ref that will be hydrated but not shared across ssr requests
+ *
+ * @param key a unique key ensuring that data fetching can be properly de-duplicated across requests
+ */
+export function useData <T> (key: string): Ref<T|undefined> {
+  if (!key || typeof key !== 'string') {
+    throw new TypeError('[nuxt] [useData] key must be a string: ' + key)
+  }
+
+  const nuxt = useNuxtApp()
+
+  // Ensure key is not conflicting with asyncData
+  // TODO: Can we actually share state with no overhead?
+  if (nuxt._asyncData[key]) {
+    throw new TypeError(`[nuxt] [useData] Key ${key} is already used by asyncData.`)
+  }
+
+  if (!(key in nuxt.payload.data)) {
+    nuxt.payload.data[key] = undefined
+  }
+  const data = toRef(nuxt.payload.data, key) as Ref<T|undefined>
+
+  return data
+}
diff --git a/packages/nuxt/src/app/composables/index.ts b/packages/nuxt/src/app/composables/index.ts
index d3af7370733..e07eca11cee 100644
--- a/packages/nuxt/src/app/composables/index.ts
+++ b/packages/nuxt/src/app/composables/index.ts
@@ -3,6 +3,7 @@ export { useAsyncData, useLazyAsyncData, refreshNuxtData } from './asyncData'
 export type { AsyncDataOptions, AsyncData } from './asyncData'
 export { useHydration } from './hydrate'
 export { useState } from './state'
+export { useData } from './data'
 export { clearError, createError, isNuxtError, throwError, showError, useError } from './error'
 export type { NuxtError } from './error'
 export { useFetch, useLazyFetch } from './fetch'
diff --git a/packages/nuxt/src/imports/presets.ts b/packages/nuxt/src/imports/presets.ts
index f1d46bc6e98..dac3ee7e30d 100644
--- a/packages/nuxt/src/imports/presets.ts
+++ b/packages/nuxt/src/imports/presets.ts
@@ -30,6 +30,7 @@ const appPreset = defineUnimportPreset({
     'defineNuxtPlugin',
     'useRuntimeConfig',
     'useState',
+    'useData',
     'useFetch',
     'useLazyFetch',
     'useCookie',
diff --git a/test/fixtures/basic/composables/random.ts b/test/fixtures/basic/composables/random.ts
index 4e6114c6029..ceeda79790d 100644
--- a/test/fixtures/basic/composables/random.ts
+++ b/test/fixtures/basic/composables/random.ts
@@ -1,3 +1,6 @@
-export function useRandomState (max: number = 100, name = 'default') {
-  return useState('random:' + name, () => Math.round(Math.random() * max))
+export function useRandomData (max: number = 100, name = 'default') {
+  const data = useData('random:' + name)
+  if (!data.value) {
+    data.value = Math.floor(Math.random() * max)
+  }
 }
diff --git a/test/fixtures/basic/pages/random/[id].vue b/test/fixtures/basic/pages/random/[id].vue
index ba4d1db5f97..6fdb54202a2 100644
--- a/test/fixtures/basic/pages/random/[id].vue
+++ b/test/fixtures/basic/pages/random/[id].vue
@@ -40,8 +40,8 @@ const pageKey = 'rand_' + route.params.id
 
 const { data: randomNumbers, refresh } = await useFetch('/api/random', { key: pageKey as string })
 
-const random = useRandomState(100, pageKey)
-const globalRandom = useRandomState(100)
+const random = useRandomData(100, pageKey)
+const globalRandom = useRandomData(100)
 </script>
 
 <style scoped>

From a27cb5ee4213989104d32b232e32b20206d14b7b Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Thu, 15 Sep 2022 20:05:33 +0200
Subject: [PATCH 2/3] update test

---
 test/basic.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 2e951d4f22c..54527851656 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -590,7 +590,7 @@ describe.skipIf(process.env.NUXT_TEST_DEV || isWindows)('payload rendering', ()
   it('renders a payload', async () => {
     const payload = await $fetch('/random/a/_payload.js', { responseType: 'text' })
     expect(payload).toMatch(
-      /export default \{data:\{\$frand_a:\[[^\]]*\]\},state:\{"\$srandom:rand_a":\d*,"\$srandom:default":\d*\},prerenderedAt:\d*\}/
+      /export default \{data:\{\$frand_a:\[[^\]]*\]\,"random:rand_a":\d*,"random:default":\d*\},state:\{},prerenderedAt:\d*\}/
     )
   })
 

From 719f7cca788b2c8488a183f033a5cda5facb05ab Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Fri, 16 Sep 2022 10:47:54 +0200
Subject: [PATCH 3/3] fix lint issue

---
 test/basic.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 54527851656..81504c7d203 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -590,7 +590,7 @@ describe.skipIf(process.env.NUXT_TEST_DEV || isWindows)('payload rendering', ()
   it('renders a payload', async () => {
     const payload = await $fetch('/random/a/_payload.js', { responseType: 'text' })
     expect(payload).toMatch(
-      /export default \{data:\{\$frand_a:\[[^\]]*\]\,"random:rand_a":\d*,"random:default":\d*\},state:\{},prerenderedAt:\d*\}/
+      /export default \{data:\{\$frand_a:\[[^\]]*\],"random:rand_a":\d*,"random:default":\d*\},state:\{},prerenderedAt:\d*\}/
     )
   })