From 7c0b9140c713705ee4b25dc937ce402d0d57e7fd Mon Sep 17 00:00:00 2001
From: pooya parsa <pyapar@gmail.com>
Date: Wed, 16 Mar 2022 23:49:30 +0100
Subject: [PATCH] feat(nuxt3):  `watch` option for `useAsyncData` to auto
 refresh (#3722)

---
 docs/content/3.docs/1.usage/1.data-fetching.md  |  2 ++
 examples/use-async-data/app.vue                 |  6 +++++-
 examples/use-async-data/server/api/hello.js     |  2 +-
 packages/nuxt3/src/app/composables/asyncData.ts | 15 +++++++++++++--
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/docs/content/3.docs/1.usage/1.data-fetching.md b/docs/content/3.docs/1.usage/1.data-fetching.md
index 7fa4b563bd..b24e821810 100644
--- a/docs/content/3.docs/1.usage/1.data-fetching.md
+++ b/docs/content/3.docs/1.usage/1.data-fetching.md
@@ -18,6 +18,7 @@ const {
   pending: Ref<boolean>,
   refresh: (force?: boolean) => Promise<void>,
   error?: any
+  watch: WatchSource[]
 } = useAsyncData(
   key: string,
   handler: (ctx?: NuxtApp) => Promise<Object>,
@@ -35,6 +36,7 @@ const {
   * _server_: whether to fetch the data on server-side (defaults to `true`)
   * _transform_: a function that can be used to alter `handler` function result after resolving
   * _pick_: only pick specified keys in this array from `handler` function result
+  * _watch_: watch reactive sources to auto refrash
 
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
 
diff --git a/examples/use-async-data/app.vue b/examples/use-async-data/app.vue
index 673d4689e7..86020c0f70 100644
--- a/examples/use-async-data/app.vue
+++ b/examples/use-async-data/app.vue
@@ -1,5 +1,6 @@
 <script setup>
-const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
+const ctr = ref(0)
+const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch(`/api/hello/${ctr.value}`), { watch: [ctr] })
 </script>
 
 <template>
@@ -9,6 +10,9 @@ const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch
       <NButton :disabled="pending" @click="refresh">
         Refresh Data
       </NButton>
+      <NButton :disabled="pending" @click="ctr++">
+        +
+      </NButton>
     </div>
     <template #tips>
       <div>
diff --git a/examples/use-async-data/server/api/hello.js b/examples/use-async-data/server/api/hello.js
index a103622ffd..3c434a5572 100644
--- a/examples/use-async-data/server/api/hello.js
+++ b/examples/use-async-data/server/api/hello.js
@@ -1 +1 @@
-export default () => `Hello world! (Generated at ${new Date().toGMTString()})`
+export default req => `Hello world (${req.url.substr(1)}) (Generated at ${new Date().toGMTString()})`
diff --git a/packages/nuxt3/src/app/composables/asyncData.ts b/packages/nuxt3/src/app/composables/asyncData.ts
index 5482c9b564..38a4da5039 100644
--- a/packages/nuxt3/src/app/composables/asyncData.ts
+++ b/packages/nuxt3/src/app/composables/asyncData.ts
@@ -1,5 +1,5 @@
-import { onBeforeMount, onServerPrefetch, onUnmounted, ref, getCurrentInstance } from 'vue'
-import type { Ref } from 'vue'
+import { onBeforeMount, onServerPrefetch, onUnmounted, ref, getCurrentInstance, watch } from 'vue'
+import type { Ref, WatchSource } from 'vue'
 import { NuxtApp, useNuxtApp } from '#app'
 
 export type _Transform<Input = any, Output = any> = (input: Input) => Output
@@ -8,6 +8,8 @@ export type PickFrom<T, K extends Array<string>> = T extends Array<any> ? T : T
 export type KeysOf<T> = Array<keyof T extends string ? keyof T : string>
 export type KeyOfRes<Transform extends _Transform> = KeysOf<ReturnType<Transform>>
 
+type MultiWatchSources = (WatchSource<unknown> | object)[];
+
 export interface AsyncDataOptions<
   DataT,
   Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>,
@@ -18,6 +20,7 @@ export interface AsyncDataOptions<
   default?: () => DataT
   transform?: Transform
   pick?: PickKeys
+  watch?: MultiWatchSources
 }
 
 export interface _AsyncData<DataT> {
@@ -133,6 +136,14 @@ export function useAsyncData<
       // 4. Navigation (lazy: false) - or plugin usage: await fetch
       asyncData.refresh()
     }
+    if (options.watch) {
+      const unwatch = watch(options.watch, () => {
+        asyncData.refresh()
+      })
+      if (instance) {
+        onUnmounted(() => unwatch())
+      }
+    }
   }
 
   // Allow directly awaiting on asyncData