fix(nuxt3)!: custom response type for useFetch using first generic (n…

…uxt#3268)
cexbrayat · Feb 16, 2022 · 77aeaa3 · 77aeaa3
1 parent 7c3327a
commit 77aeaa3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/nuxt3/src/app/composables/fetch.ts b/packages/nuxt3/src/app/composables/fetch.ts
@@ -13,13 +13,14 @@ export type UseFetchOptions<
 > = AsyncDataOptions<DataT, Transform, PickKeys> & FetchOptions & { key?: string }
 
 export function useFetch<
+  ResT = void,
   ReqT extends string = string,
-  ResT = FetchResult<ReqT>,
-  Transform extends (res: ResT) => any = (res: ResT) => ResT,
+  _ResT = ResT extends void ? FetchResult<ReqT> : ResT,
+  Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   url: ReqT,
-  opts: UseFetchOptions<ResT, Transform, PickKeys> = {}
+  opts: UseFetchOptions<_ResT, Transform, PickKeys> = {}
 ) {
   if (!opts.key) {
     const keys: any = { u: url }
@@ -35,17 +36,18 @@ export function useFetch<
     opts.key = generateKey(keys)
   }
 
-  return useAsyncData(opts.key, () => $fetch(url, opts) as Promise<ResT>, opts)
+  return useAsyncData(opts.key, () => $fetch(url, opts) as Promise<_ResT>, opts)
 }
 
 export function useLazyFetch<
+  ResT = void,
   ReqT extends string = string,
-  ResT = FetchResult<ReqT>,
-  Transform extends (res: ResT) => any = (res: ResT) => ResT,
+  _ResT = ResT extends void ? FetchResult<ReqT> : ResT,
+  Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   url: ReqT,
-  opts: Omit<UseFetchOptions<ResT, Transform, PickKeys>, 'lazy'> = {}
+  opts: Omit<UseFetchOptions<_ResT, Transform, PickKeys>, 'lazy'> = {}
 ) {
   return useFetch(url, { ...opts, lazy: true })
 }

diff --git a/test/fixtures/basic/tests/types.ts b/test/fixtures/basic/tests/types.ts
@@ -7,22 +7,28 @@ import { defineNuxtConfig } from '~~/../../../packages/nuxt3/src'
 import { useRouter } from '#imports'
 import { isVue3 } from '#app'
 
+interface TestResponse { message: string }
+
 describe('API routes', () => {
   it('generates types for routes', () => {
     expectTypeOf($fetch('/api/hello')).toMatchTypeOf<Promise<string>>()
     expectTypeOf($fetch('/api/hey')).toMatchTypeOf<Promise<{ foo:string, baz: string }>>()
     expectTypeOf($fetch('/api/other')).toMatchTypeOf<Promise<unknown>>()
+    expectTypeOf($fetch<TestResponse>('/test')).toMatchTypeOf<Promise<TestResponse>>()
   })
 
   it('works with useFetch', () => {
     expectTypeOf(useFetch('/api/hello').data).toMatchTypeOf<Ref<string>>()
     expectTypeOf(useFetch('/api/hey').data).toMatchTypeOf<Ref<{ foo:string, baz: string }>>()
     expectTypeOf(useFetch('/api/hey', { pick: ['baz'] }).data).toMatchTypeOf<Ref<{ baz: string }>>()
     expectTypeOf(useFetch('/api/other').data).toMatchTypeOf<Ref<unknown>>()
+    expectTypeOf(useFetch<TestResponse>('/test').data).toMatchTypeOf<Ref<TestResponse>>()
     expectTypeOf(useLazyFetch('/api/hello').data).toMatchTypeOf<Ref<string>>()
     expectTypeOf(useLazyFetch('/api/hey').data).toMatchTypeOf<Ref<{ foo:string, baz: string }>>()
     expectTypeOf(useLazyFetch('/api/hey', { pick: ['baz'] }).data).toMatchTypeOf<Ref<{ baz: string }>>()
     expectTypeOf(useLazyFetch('/api/other').data).toMatchTypeOf<Ref<unknown>>()
+    expectTypeOf(useLazyFetch('/api/other').data).toMatchTypeOf<Ref<unknown>>()
+    expectTypeOf(useLazyFetch<TestResponse>('/test').data).toMatchTypeOf<Ref<TestResponse>>()
   })
 })