feat(nuxt): support async transforms for data composables (#26154)

nuxt · Mar 8, 2024 · 0cc7f29 · 0cc7f29
1 parent 4023f7c
commit 0cc7f29
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/docs/3.api/2.composables/use-async-data.md b/docs/3.api/2.composables/use-async-data.md
@@ -119,7 +119,7 @@ type AsyncDataOptions<DataT> = {
   deep?: boolean
   dedupe?: 'cancel' | 'defer'
   default?: () => DataT | Ref<DataT> | null
-  transform?: (input: DataT) => DataT
+  transform?: (input: DataT) => DataT | Promise<DataT>
   pick?: string[]
   watch?: WatchSource[]
   getCachedData?: (key: string) => DataT

diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
@@ -148,7 +148,7 @@ type UseFetchOptions<DataT> = {
   deep?: boolean
   dedupe?: 'cancel' | 'defer'
   default?: () => DataT
-  transform?: (input: DataT) => DataT
+  transform?: (input: DataT) => DataT | Promise<DataT>
   pick?: string[]
   watch?: WatchSource[] | false
 }

diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
@@ -12,7 +12,7 @@ import { asyncDataDefaults } from '#build/nuxt.config.mjs'
 
 export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 
-export type _Transform<Input = any, Output = any> = (input: Input) => Output
+export type _Transform<Input = any, Output = any> = (input: Input) => Output | Promise<Output>
 
 export type PickFrom<T, K extends Array<string>> = T extends Array<any>
   ? T
@@ -283,13 +283,13 @@ export function useAsyncData<
           reject(err)
         }
       })
-      .then((_result) => {
+      .then(async (_result) => {
         // If this request is cancelled, resolve to the latest request.
         if ((promise as any).cancelled) { return nuxtApp._asyncDataPromises[key] }
 
         let result = _result as unknown as DataT
         if (options.transform) {
-          result = options.transform(_result)
+          result = await options.transform(_result)
         }
         if (options.pick) {
           result = pick(result as any, options.pick) as DataT

diff --git a/test/fixtures/basic-types/types.ts b/test/fixtures/basic-types/types.ts
@@ -418,6 +418,16 @@ describe('composables', () => {
     expectTypeOf(useLazyAsyncData<string>(() => $fetch('/test'), { default: () => 'test', transform: () => 'transformed' }).data).toEqualTypeOf<Ref<string>>()
   })
 
+  it('supports asynchronous transform', () => {
+    const { data } = useAsyncData('test', () => $fetch('/test') as Promise<{ foo: 'bar' }>, {
+      async transform (data) {
+        await Promise.resolve()
+        return data.foo
+      }
+    })
+    expectTypeOf(data).toEqualTypeOf<Ref<'bar' | null>>()
+  })
+
   it('infer request url string literal from server/api routes', () => {
     // request can accept dynamic string type
     const dynamicStringUrl = 'https://example.com/api'