feat(nuxt3): useFetch with dynamic reactive request (#3731)

examples/use-fetch/app.vue

@@ -1,11 +1,17 @@
 <script setup>
-const { data } = await useFetch('/api/hello', { params: { foo: 'bar' } })
+const count = ref(1)
+const { data } = await useFetch(() => `/api/hello/${count.value}`, { params: { token: 123 } })
 </script>
 
 <template>
-  <NuxtExampleLayout example="use-fetch" show-tips="true">
-    Server response
+  <NuxtExampleLayout example="use-fetch" :show-tips="true">
+    <div>
+      Fetch result:
       <pre class="text-left"><code>{{ data }}</code></pre>
+      <NButton @click="count++">
+        +
+      </NButton>
+    </div>
     <template #tips>
       <div>
         Nuxt will automatically read in files in the

examples/use-fetch/server/api/hello.ts

@@ -1,3 +1,7 @@
 import { useQuery } from 'h3'
+import { parseURL } from 'ufo'
 
-export default req => ({ query: useQuery(req) })
+export default req => ({
+  path: '/api/hello' + parseURL(req.url).pathname,
+  query: useQuery(req)
+})

packages/bridge/package.json

@@ -46,6 +46,7 @@
     "murmurhash-es": "^0.1.1",
     "node-fetch": "^3.2.3",
     "nuxi": "3.0.0",
+    "ohash": "^0.1.0",
     "pathe": "^0.2.0",
     "perfect-debounce": "^0.1.3",
     "postcss": "^8",

packages/nuxt3/package.json

@@ -51,9 +51,9 @@
     "knitwork": "^0.1.1",
     "magic-string": "^0.26.1",
     "mlly": "^0.4.3",
-    "murmurhash-es": "^0.1.1",
     "nitropack": "npm:nitropack-edge@latest",
     "nuxi": "3.0.0",
+    "ohash": "^0.1.0",
     "ohmyfetch": "^0.4.15",
     "pathe": "^0.2.0",
     "perfect-debounce": "^0.1.3",

packages/nuxt3/src/app/composables/fetch.ts

@@ -1,6 +1,7 @@
 import type { FetchOptions, FetchRequest } from 'ohmyfetch'
 import type { TypedInternalResponse } from '@nuxt/nitro'
-import { murmurHashV3 } from 'murmurhash-es'
+import { hash } from 'ohash'
+import { computed, isRef, Ref } from 'vue'
 import type { AsyncDataOptions, _Transform, KeyOfRes } from './asyncData'
 import { useAsyncData } from './asyncData'
 
@@ -14,29 +15,34 @@ export type UseFetchOptions<
 
 export function useFetch<
   ResT = void,
-  ReqT extends string = string,
+  ReqT extends FetchRequest = FetchRequest,
   _ResT = ResT extends void ? FetchResult<ReqT> : ResT,
   Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
-  url: ReqT,
+  request: Ref<ReqT> | ReqT | (() => ReqT),
   opts: UseFetchOptions<_ResT, Transform, PickKeys> = {}
 ) {
-  if (!opts.key) {
-    const keys: any = { u: url }
-    if (opts.baseURL) {
-      keys.b = opts.baseURL
-    }
-    if (opts.method && opts.method.toLowerCase() !== 'get') {
-      keys.m = opts.method.toLowerCase()
-    }
-    if (opts.params) {
-      keys.p = opts.params
-    }
-    opts.key = generateKey(keys)
+  const key = '$f_' + (opts.key || hash([request, opts]))
+  const _request = computed<FetchRequest>(() => {
+    let r = request
+    if (typeof r === 'function') {
+      r = r()
     }
+    return isRef(r) ? r.value : r
+  })
 
-  return useAsyncData(opts.key, () => $fetch(url, opts) as Promise<_ResT>, opts)
+  const asyncData = useAsyncData(key, () => {
+    return $fetch(_request.value, opts) as Promise<_ResT>
+  }, {
+    ...opts,
+    watch: [
+      _request,
+      ...(opts.watch || [])
+    ]
+  })
+
+  return asyncData
 }
 
 export function useLazyFetch<
@@ -51,7 +57,3 @@ export function useLazyFetch<
 ) {
   return useFetch(url, { ...opts, lazy: true })
 }
-
-function generateKey (keys) {
-  return '$f' + murmurHashV3(JSON.stringify(keys))
-}

yarn.lock

@@ -2620,6 +2620,7 @@ __metadata:
     node-fetch: ^3.2.3
     nuxi: 3.0.0
     nuxt: ^2
+    ohash: ^0.1.0
     pathe: ^0.2.0
     perfect-debounce: ^0.1.3
     postcss: ^8
@@ -15464,9 +15465,9 @@ __metadata:
     knitwork: ^0.1.1
     magic-string: ^0.26.1
     mlly: ^0.4.3
-    murmurhash-es: ^0.1.1
     nitropack: "npm:nitropack-edge@latest"
     nuxi: 3.0.0
+    ohash: ^0.1.0
     ohmyfetch: ^0.4.15
     pathe: ^0.2.0
     perfect-debounce: ^0.1.3
@@ -15608,6 +15609,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ohash@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "ohash@npm:0.1.0"
+  checksum: b2bfde97c96bb4e71f3e0b7718239c7e49435394f1f562e0d21a069b84302bea0a235c65e2615009f6a4e2008963914917bfcd576d65ff56016f174d0b1e206b
+  languageName: node
+  linkType: hard
+
 "ohmyfetch@npm:^0.4.15, ohmyfetch@npm:^0.4.5":
   version: 0.4.15
   resolution: "ohmyfetch@npm:0.4.15"