refactor(nuxt): enhance useFetch and useLazyFetch request type

docs/content/2.guide/2.features/5.data-fetching.md

@@ -64,7 +64,7 @@ watch(count, (newCount) => {
 
 Within your pages, components and plugins you can use `useFetch` to universally fetch from any URL.
 
-This composable provides a convenient wrapper around `useAsyncData` and `$fetch`. It automatically generates a key based on URL and fetch options, as well as infers API response type.
+This composable provides a convenient wrapper around `useAsyncData` and `$fetch`. It automatically generates a key based on URL and fetch options, provide type hints for request url base on server routes, as well as infers API response type.
 
 ::ReadMore{link="/api/composables/use-fetch"}
 ::

docs/content/3.api/1.composables/use-fetch.md

@@ -1,6 +1,6 @@
 # `useFetch`
 
-This composable provides a convenient wrapper around [`useAsyncData`](/api/composables/use-async-data) and [`$fetch`](/api/utils/$fetch). It automatically generates a key based on URL and fetch options, as well as infers API response type.
+This composable provides a convenient wrapper around [`useAsyncData`](/api/composables/use-async-data) and [`$fetch`](/api/utils/$fetch). It automatically generates a key based on URL and fetch options, provide type hints for request url base on server routes, as well as infers API response type.
 
 ## Type
 

packages/nuxt/package.json

@@ -52,7 +52,7 @@
     "knitwork": "^0.1.1",
     "magic-string": "^0.26.1",
     "mlly": "^0.5.2",
-    "nitropack": "^0.4.3",
+    "nitropack": "^0.4.4",
     "nuxi": "^3.0.0-rc.3",
     "ohash": "^0.1.0",
     "ohmyfetch": "^0.4.16",

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

@@ -1,4 +1,4 @@
-import type { FetchOptions, FetchRequest } from 'ohmyfetch'
+import type { FetchOptions } from 'ohmyfetch'
 import type { TypedInternalResponse, NitroFetchRequest } from 'nitropack'
 import { hash } from 'ohash'
 import { computed, isRef, Ref } from 'vue'
@@ -31,11 +31,11 @@ export function useFetch<
   }
   const key = '$f_' + (opts.key || hash([request, { ...opts, transform: null }]))
   const _request = computed(() => {
-    let r = request as Ref<FetchRequest> | FetchRequest | (() => FetchRequest)
+    let r = request
     if (typeof r === 'function') {
       r = r()
     }
-    return (isRef(r) ? r.value : r) as NitroFetchRequest
+    return (isRef(r) ? r.value : r)
   })
 
   const _fetchOptions = {
@@ -52,7 +52,7 @@ export function useFetch<
   }
 
   const asyncData = useAsyncData<_ResT, ErrorT, Transform, PickKeys>(key, () => {
-    return $fetch(_request.value, _fetchOptions)
+    return $fetch(_request.value, _fetchOptions) as Promise<_ResT>
   }, _asyncDataOptions)
 
   return asyncData

packages/nuxt/src/core/runtime/nitro/error.ts

@@ -1,5 +1,5 @@
 import { withQuery } from 'ufo'
-import type { NitroErrorHandler, NitroFetchRequest } from 'nitropack'
+import type { NitroErrorHandler } from 'nitropack'
 // @ts-ignore TODO
 import { normalizeError, isJsonRequest } from '#internal/nitro/utils'
 
@@ -36,7 +36,7 @@ export default <NitroErrorHandler> async function errorhandler (_error, event) {
   }
 
   // HTML response
-  const url = withQuery('/__nuxt_error', errorObject as any) as NitroFetchRequest
+  const url = withQuery('/__nuxt_error', errorObject as any)
   const html = await $fetch(url).catch((error) => {
     console.error('[nitro] Error while generating error response', error)
     return errorObject.statusMessage

test/fixtures/basic/types.ts

@@ -134,4 +134,18 @@ describe('composables', () => {
     expectTypeOf(useFetch('/test', { default: () => ref(500) }).data).toMatchTypeOf<Ref<number>>()
     expectTypeOf(useFetch('/test', { default: () => 500 }).data).toMatchTypeOf<Ref<number>>()
   })
+
+  it('infer request url string literal from server/api routes', () => {
+    // request can accept dynamic string type
+    const dynamicStringUrl:string = 'https://example.com/api'
+    expectTypeOf(useFetch(dynamicStringUrl).data).toMatchTypeOf<Ref<Pick<unknown, never>>>()
+
+    // request param should infer string literal type / show auto-complete hint base on server routes, ex: '/api/hello'
+    expectTypeOf(useFetch('/api/hello').data).toMatchTypeOf<Ref<string>>()
+    expectTypeOf(useLazyFetch('/api/hello').data).toMatchTypeOf<Ref<string>>()
+
+    // request can accept string literal and Request object type
+    expectTypeOf(useFetch('https://example.com/api').data).toMatchTypeOf<Ref<Pick<unknown, never>>>()
+    expectTypeOf(useFetch(new Request('test')).data).toMatchTypeOf<Ref<Pick<unknown, never>>>()
+  })
 })

yarn.lock

@@ -9495,9 +9495,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nitropack@npm:^0.4.3":
-  version: 0.4.3
-  resolution: "nitropack@npm:0.4.3"
+"nitropack@npm:^0.4.4":
+  version: 0.4.4
+  resolution: "nitropack@npm:0.4.4"
   dependencies:
     "@cloudflare/kv-asset-handler": ^0.2.0
     "@netlify/functions": ^1.0.0
@@ -9535,7 +9535,7 @@ __metadata:
     mime: ^3.0.0
     mlly: ^0.5.2
     mri: ^1.2.0
-    node-fetch: ^3.2.4
+    node-fetch-native: ^0.1.2
     ohash: ^0.1.0
     ohmyfetch: ^0.4.16
     pathe: ^0.3.0
@@ -9554,13 +9554,13 @@ __metadata:
     std-env: ^3.1.1
     table: ^6.8.0
     ufo: ^0.8.4
-    unenv: ^0.5.1
+    unenv: ^0.5.2
     unimport: ^0.2.1
     unstorage: ^0.4.1
   bin:
     nitro: dist/cli.mjs
     nitropack: dist/cli.mjs
-  checksum: 41b143ec2c2990df7374f91014c7c13f00acd910039bc902874436655cbbbaec9478c6f374b21f984ebb21b9f6dbfc702dba84cdf0b19b15cd92f8843fad7694
+  checksum: 5dd9ece9707b775bf87f1f6625ce96bfc29813507157dbd84178220cd0f1216964b474498f51b934ddfcd5f6ea120a4f1071415ac37eed28ea9a406e6c283882
   languageName: node
   linkType: hard
 
@@ -9571,6 +9571,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-fetch-native@npm:^0.1.2":
+  version: 0.1.3
+  resolution: "node-fetch-native@npm:0.1.3"
+  checksum: b9659a22c41b471e970ef3223682d08c7c439deed9ed647f218bda503dae06d78f1882e1532ff9a70d088eac4a20b12a1711e18a756f609e26d6956955277a40
+  languageName: node
+  linkType: hard
+
 "node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
   version: 2.6.7
   resolution: "node-fetch@npm:2.6.7"
@@ -10074,7 +10081,7 @@ __metadata:
     knitwork: ^0.1.1
     magic-string: ^0.26.1
     mlly: ^0.5.2
-    nitropack: ^0.4.3
+    nitropack: ^0.4.4
     nuxi: ^3.0.0-rc.3
     ohash: ^0.1.0
     ohmyfetch: ^0.4.16
@@ -13353,6 +13360,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unenv@npm:^0.5.2":
+  version: 0.5.2
+  resolution: "unenv@npm:0.5.2"
+  dependencies:
+    defu: ^6.0.0
+    mime: ^3.0.0
+    node-fetch-native: ^0.1.2
+    pathe: ^0.3.0
+  checksum: 07efccc473e419cad22e86aac504bb49f9fc9c22c85fa8b830d6fbdf2aea39f82278bd70306a5c42dc26c6bc5f5034b23ea4f14bfd73ba9db7370a9e9b34fc6e
+  languageName: node
+  linkType: hard
+
 "unimport@npm:^0.2.1":
   version: 0.2.1
   resolution: "unimport@npm:0.2.1"