feat(nuxt3): let useAsyncData() return value that error can defined type by generics (#4109)

docs/content/3.api/1.composables/use-async-data.md

@@ -8,7 +8,7 @@ const {
   data: Ref<DataT>,
   pending: Ref<boolean>,
   refresh: () => Promise<void>,
-  error?: any
+  error: Ref<any>
 } = useAsyncData(
   key: string,
   handler: (ctx?: NuxtApp) => Promise<Object>,

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

@@ -28,26 +28,27 @@ export interface RefreshOptions {
   _initial?: boolean
 }
 
-export interface _AsyncData<DataT> {
+export interface _AsyncData<DataT, ErrorT> {
   data: Ref<DataT>
   pending: Ref<boolean>
   refresh: (opts?: RefreshOptions) => Promise<void>
-  error?: any
+  error: Ref<ErrorT>
 }
 
-export type AsyncData<Data> = _AsyncData<Data> & Promise<_AsyncData<Data>>
+export type AsyncData<Data, Error> = _AsyncData<Data, Error> & Promise<_AsyncData<Data, Error>>
 
 const getDefault = () => null
 
 export function useAsyncData<
   DataT,
+  DataE = any,
   Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   key: string,
   handler: (ctx?: NuxtApp) => Promise<DataT>,
   options: AsyncDataOptions<DataT, Transform, PickKeys> = {}
-): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>> {
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE> {
   // Validate arguments
   if (typeof key !== 'string') {
     throw new TypeError('asyncData key must be a string')
@@ -87,7 +88,7 @@ export function useAsyncData<
     data: ref(nuxt.payload.data[key] ?? options.default()),
     pending: ref(!useInitialCache()),
     error: ref(nuxt.payload._errors[key] ?? null)
-  } as AsyncData<DataT>
+  } as AsyncData<DataT, DataE>
 
   asyncData.refresh = (opts = {}) => {
     // Avoid fetching same key more than once at a time
@@ -164,21 +165,22 @@ export function useAsyncData<
   }
 
   // Allow directly awaiting on asyncData
-  const asyncDataPromise = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => asyncData) as AsyncData<DataT>
+  const asyncDataPromise = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => asyncData) as AsyncData<DataT, DataE>
   Object.assign(asyncDataPromise, asyncData)
 
-  return asyncDataPromise as AsyncData<PickFrom<ReturnType<Transform>, PickKeys>>
+  return asyncDataPromise as AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE>
 }
 
 export function useLazyAsyncData<
   DataT,
+  DataE = any,
   Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   key: string,
   handler: (ctx?: NuxtApp) => Promise<DataT>,
   options: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'> = {}
-): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>> {
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE> {
   return useAsyncData(key, handler, { ...options, lazy: true })
 }
 

test/fixtures/basic/types.ts

@@ -17,6 +17,22 @@ describe('API routes', () => {
     expectTypeOf($fetch<TestResponse>('/test')).toMatchTypeOf<Promise<TestResponse>>()
   })
 
+  it('works with useAsyncData', () => {
+    expectTypeOf(useAsyncData('api-hello', () => $fetch('/api/hello')).data).toMatchTypeOf<Ref<string>>()
+    expectTypeOf(useAsyncData('api-hey', () => $fetch('/api/hey')).data).toMatchTypeOf<Ref<{ foo:string, baz: string }>>()
+    expectTypeOf(useAsyncData('api-hey-with-pick', () => $fetch('/api/hey'), { pick: ['baz'] }).data).toMatchTypeOf<Ref<{ baz: string }>>()
+    expectTypeOf(useAsyncData('api-other', () => $fetch('/api/other')).data).toMatchTypeOf<Ref<unknown>>()
+    expectTypeOf(useAsyncData<TestResponse>('api-generics', () => $fetch('/test')).data).toMatchTypeOf<Ref<TestResponse>>()
+    expectTypeOf(useAsyncData<any, string>('api-error-generics', () => $fetch('/test')).error).toMatchTypeOf<Ref<string>>()
+
+    expectTypeOf(useLazyAsyncData('lazy-api-hello', () => $fetch('/api/hello')).data).toMatchTypeOf<Ref<string>>()
+    expectTypeOf(useLazyAsyncData('lazy-api-hey', () => $fetch('/api/hey')).data).toMatchTypeOf<Ref<{ foo:string, baz: string }>>()
+    expectTypeOf(useLazyAsyncData('lazy-api-hey-with-pick', () => $fetch('/api/hey'), { pick: ['baz'] }).data).toMatchTypeOf<Ref<{ baz: string }>>()
+    expectTypeOf(useLazyAsyncData('lazy-api-other', () => $fetch('/api/other')).data).toMatchTypeOf<Ref<unknown>>()
+    expectTypeOf(useLazyAsyncData<TestResponse>('lazy-api-generics', () => $fetch('/test')).data).toMatchTypeOf<Ref<TestResponse>>()
+    expectTypeOf(useLazyAsyncData<any, string>('lazy-error-generics', () => $fetch('/test')).error).toMatchTypeOf<Ref<string>>()
+  })
+
   it('works with useFetch', () => {
     expectTypeOf(useFetch('/api/hello').data).toMatchTypeOf<Ref<string>>()
     expectTypeOf(useFetch('/api/hey').data).toMatchTypeOf<Ref<{ foo:string, baz: string }>>()