Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): improve types for data fetching with transform (#19487)

Browse Source
This commit is contained in:
Xin Du (Clark) 2023-03-11 22:36:10 +00:00 committed by GitHub
parent 53a2a0fdcb
commit 4de4de1a71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
packages/nuxt/src/app/composables/asyncData.ts
View File

@ -27,14 +27,14 @@ export type KeyOfRes<Transform extends _Transform> = KeysOf<ReturnType<Transform
type MultiWatchSources = (WatchSource<unknown> | object)[] type MultiWatchSources = (WatchSource<unknown> | object)[]
export interface AsyncDataOptions< export interface AsyncDataOptions<
DataT, ResT,
Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<_Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> =KeysOf<DataT>,
> { > {
server?: boolean server?: boolean
lazy?: boolean lazy?: boolean
default?: () => DataT | Ref<DataT> | null default?: () => DataT | Ref<DataT> | null
transform?: Transform transform?: _Transform<ResT, DataT>,
pick?: PickKeys pick?: PickKeys
watch?: MultiWatchSources watch?: MultiWatchSources
immediate?: boolean immediate?: boolean
@ -62,35 +62,35 @@ export type AsyncData<Data, Error> = _AsyncData<Data, Error> & Promise<_AsyncDat
const getDefault = () => null const getDefault = () => null
export function useAsyncData< export function useAsyncData<
DataT, ResT,
DataE = Error, DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
handler: (ctx?: NuxtApp) => Promise<DataT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<DataT, Transform, PickKeys> options?: AsyncDataOptions<ResT, DataT, PickKeys>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useAsyncData< export function useAsyncData<
DataT, ResT,
DataE = Error, DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<DataT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<DataT, Transform, PickKeys> options?: AsyncDataOptions<ResT, DataT, PickKeys>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useAsyncData< export function useAsyncData<
DataT, ResT,
DataE = Error, DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (...args: any[]): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> { > (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
if (typeof args[0] !== 'string') { args.unshift(autoKey) } if (typeof args[0] !== 'string') { args.unshift(autoKey) }
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
let [key, handler, options = {}] = args as [string, (ctx?: NuxtApp) => Promise<DataT>, AsyncDataOptions<DataT, Transform, PickKeys>] let [key, handler, options = {}] = args as [string, (ctx?: NuxtApp) => Promise<ResT>, AsyncDataOptions<ResT, DataT, PickKeys>]
// Validate arguments // Validate arguments
if (typeof key !== 'string') { if (typeof key !== 'string') {
@ -138,7 +138,7 @@ export function useAsyncData<
} }
asyncData.pending.value = true asyncData.pending.value = true
// TODO: Cancel previous promise // TODO: Cancel previous promise
const promise = new Promise<DataT>( const promise = new Promise<ResT>(
(resolve, reject) => { (resolve, reject) => {
try { try {
resolve(handler(nuxt)) resolve(handler(nuxt))
@ -146,12 +146,13 @@ export function useAsyncData<
reject(err) reject(err)
} }
}) })
.then((result) => { .then((_result) => {
// If this request is cancelled, resolve to the latest request. // If this request is cancelled, resolve to the latest request.
if ((promise as any).cancelled) { return nuxt._asyncDataPromises[key] } if ((promise as any).cancelled) { return nuxt._asyncDataPromises[key] }
let result = _result as unknown as DataT
if (options.transform) { if (options.transform) {
result = options.transform(result) result = options.transform(_result)
} }
if (options.pick) { if (options.pick) {
result = pick(result as any, options.pick) as DataT result = pick(result as any, options.pick) as DataT
@ -236,39 +237,39 @@ export function useAsyncData<
} }
// Allow directly awaiting on asyncData // Allow directly awaiting on asyncData
const asyncDataPromise = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => asyncData) as AsyncData<DataT, DataE> const asyncDataPromise = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => asyncData) as AsyncData<ResT, DataE>
Object.assign(asyncDataPromise, asyncData) Object.assign(asyncDataPromise, asyncData)
return asyncDataPromise as AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE> return asyncDataPromise as AsyncData<PickFrom<DataT, PickKeys>, DataE>
} }
export function useLazyAsyncData< export function useLazyAsyncData<
DataT, ResT,
DataE = Error, DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
handler: (ctx?: NuxtApp) => Promise<DataT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'lazy'>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useLazyAsyncData< export function useLazyAsyncData<
DataT, ResT,
DataE = Error, DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<DataT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'lazy'>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useLazyAsyncData< export function useLazyAsyncData<
DataT, ResT,
DataE = Error, DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (...args: any[]): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> { > (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
if (typeof args[0] !== 'string') { args.unshift(autoKey) } if (typeof args[0] !== 'string') { args.unshift(autoKey) }
const [key, handler, options] = args as [string, (ctx?: NuxtApp) => Promise<DataT>, AsyncDataOptions<DataT, Transform, PickKeys>] const [key, handler, options] = args as [string, (ctx?: NuxtApp) => Promise<ResT>, AsyncDataOptions<ResT, DataT, PickKeys>]
// @ts-ignore // @ts-ignore
return useAsyncData(key, handler, { ...options, lazy: true }, null) return useAsyncData(key, handler, { ...options, lazy: true }, null)
} }

44
packages/nuxt/src/app/composables/fetch.ts
View File

@ -4,7 +4,7 @@ import type { Ref } from 'vue'
import { computed, unref, reactive } from 'vue' import { computed, unref, reactive } from 'vue'
import { hash } from 'ohash' import { hash } from 'ohash'
import { useRequestFetch } from './ssr' import { useRequestFetch } from './ssr'
import type { AsyncDataOptions, _Transform, KeyOfRes, AsyncData, PickFrom } from './asyncData' import type { AsyncDataOptions, _Transform, KeysOf, AsyncData, PickFrom } from './asyncData'
import { useAsyncData } from './asyncData' import { useAsyncData } from './asyncData'
export type FetchResult<ReqT extends NitroFetchRequest, M extends AvailableRouterMethod<ReqT>> = TypedInternalResponse<ReqT, unknown, M> export type FetchResult<ReqT extends NitroFetchRequest, M extends AvailableRouterMethod<ReqT>> = TypedInternalResponse<ReqT, unknown, M>
@ -16,12 +16,12 @@ type ComputedOptions<T extends Record<string, any>> = {
type ComputedFetchOptions<R extends NitroFetchRequest, M extends AvailableRouterMethod<R>> = ComputedOptions<NitroFetchOptions<R, M>> type ComputedFetchOptions<R extends NitroFetchRequest, M extends AvailableRouterMethod<R>> = ComputedOptions<NitroFetchOptions<R, M>>
export interface UseFetchOptions< export interface UseFetchOptions<
DataT, ResT,
Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>, DataT = ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
R extends NitroFetchRequest = string & {}, R extends NitroFetchRequest = string & {},
M extends AvailableRouterMethod<R> = AvailableRouterMethod<R> M extends AvailableRouterMethod<R> = AvailableRouterMethod<R>
> extends AsyncDataOptions<DataT, Transform, PickKeys>, ComputedFetchOptions<R, M> { > extends AsyncDataOptions<ResT, DataT, PickKeys>, ComputedFetchOptions<R, M> {
key?: string key?: string
$fetch?: typeof globalThis.$fetch $fetch?: typeof globalThis.$fetch
} }
@ -32,23 +32,23 @@ export function useFetch<
ReqT extends NitroFetchRequest = NitroFetchRequest, ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT, DataT = _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: UseFetchOptions<_ResT, Transform, PickKeys, ReqT, Method> opts?: UseFetchOptions<_ResT, DataT, PickKeys, ReqT, Method>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys>, ErrorT | null>
export function useFetch< export function useFetch<
ResT = void, ResT = void,
ErrorT = FetchError, ErrorT = FetchError,
ReqT extends NitroFetchRequest = NitroFetchRequest, ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT, DataT = _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
arg1?: string | UseFetchOptions<_ResT, Transform, PickKeys, ReqT, Method>, arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, ReqT, Method>,
arg2?: string arg2?: string
) { ) {
const [opts = {}, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2] const [opts = {}, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2]
@ -85,7 +85,7 @@ export function useFetch<
cache: typeof opts.cache === 'boolean' ? undefined : opts.cache cache: typeof opts.cache === 'boolean' ? undefined : opts.cache
}) })
const _asyncDataOptions: AsyncDataOptions<_ResT, Transform, PickKeys> = { const _asyncDataOptions: AsyncDataOptions<_ResT, DataT, PickKeys> = {
server, server,
lazy, lazy,
default: defaultFn, default: defaultFn,
@ -101,7 +101,7 @@ export function useFetch<
let controller: AbortController let controller: AbortController
const asyncData = useAsyncData<_ResT, ErrorT, Transform, PickKeys>(key, () => { const asyncData = useAsyncData<_ResT, ErrorT, DataT, PickKeys>(key, () => {
controller?.abort?.() controller?.abort?.()
controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
@ -124,28 +124,28 @@ export function useLazyFetch<
ReqT extends NitroFetchRequest = NitroFetchRequest, ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT, DataT = _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: Omit<UseFetchOptions<_ResT, Transform, PickKeys, Method>, 'lazy'> opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, Method>, 'lazy'>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys>, ErrorT | null>
export function useLazyFetch< export function useLazyFetch<
ResT = void, ResT = void,
ErrorT = FetchError, ErrorT = FetchError,
ReqT extends NitroFetchRequest = NitroFetchRequest, ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT, DataT = _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform> PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
arg1?: string | Omit<UseFetchOptions<_ResT, Transform, PickKeys, Method>, 'lazy'>, arg1?: string | Omit<UseFetchOptions<_ResT, DataT, PickKeys, Method>, 'lazy'>,
arg2?: string arg2?: string
) { ) {
const [opts, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2] const [opts, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2]
return useFetch<ResT, ErrorT, ReqT, _ResT, Transform, PickKeys>(request, { return useFetch<ResT, ErrorT, ReqT, _ResT, PickKeys>(request, {
...opts, ...opts,
lazy: true lazy: true
}, },

9
test/fixtures/basic/types.ts vendored
View File

@ -199,9 +199,7 @@ describe('composables', () => {
expectTypeOf(useAsyncData('test', () => Promise.resolve(500), { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useAsyncData('test', () => Promise.resolve(500), { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>()
expectTypeOf(useAsyncData('test', () => Promise.resolve(500), { default: () => 500 }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useAsyncData('test', () => Promise.resolve(500), { default: () => 500 }).data).toEqualTypeOf<Ref<number | null>>()
// @ts-expect-error
expectTypeOf(useAsyncData('test', () => Promise.resolve('500'), { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useAsyncData('test', () => Promise.resolve('500'), { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>()
// @ts-expect-error
expectTypeOf(useAsyncData('test', () => Promise.resolve('500'), { default: () => 500 }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useAsyncData('test', () => Promise.resolve('500'), { default: () => 500 }).data).toEqualTypeOf<Ref<number | null>>()
expectTypeOf(useFetch('/test', { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useFetch('/test', { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>()
@ -235,6 +233,13 @@ describe('composables', () => {
.toEqualTypeOf(useLazyAsyncData(() => Promise.resolve({ foo: Math.random() }))) .toEqualTypeOf(useLazyAsyncData(() => Promise.resolve({ foo: Math.random() })))
expectTypeOf(useLazyAsyncData('test', () => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo })) expectTypeOf(useLazyAsyncData('test', () => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo }))
.toEqualTypeOf(useLazyAsyncData(() => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo })) .toEqualTypeOf(useLazyAsyncData(() => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo }))
// Default values: #14437
expectTypeOf(useAsyncData('test', () => Promise.resolve({ foo: { bar: 500 } }), { default: () => ({ bar: 500 }), transform: v => v.foo }).data).toEqualTypeOf<Ref<{bar: number} | null>>()
expectTypeOf(useLazyAsyncData('test', () => Promise.resolve({ foo: { bar: 500 } }), { default: () => ({ bar: 500 }), transform: v => v.foo }))
.toEqualTypeOf(useLazyAsyncData(() => Promise.resolve({ foo: { bar: 500 } }), { default: () => ({ bar: 500 }), transform: v => v.foo }))
expectTypeOf(useFetch('/api/hey', { default: () => 'bar', transform: v => v.foo }).data).toEqualTypeOf<Ref<string | null>>()
expectTypeOf(useLazyFetch('/api/hey', { default: () => 'bar', transform: v => v.foo }).data).toEqualTypeOf<Ref<string | null>>()
}) })
}) })