Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Mar 11, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4969dc
fix(type): improve type inference on asyncData option
clarkdo Mar 6, 2023
5bcfef6
Merge remote-tracking branch 'origin/main' into fix/async-data-option
danielroe Mar 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
87 changes: 44 additions & 43 deletions packages/nuxt/src/app/composables/asyncData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@ export type KeyOfRes<Transform extends _Transform> = KeysOf<ReturnType<Transform
type MultiWatchSources = (WatchSource<unknown> | object)[]

export interface AsyncDataOptions<
DataT,
Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<_Transform> = KeyOfRes<Transform>
ResT,
DataT = ResT,
PickKeys extends KeysOf<DataT> =KeysOf<DataT>,
> {
server?: boolean
lazy?: boolean
default?: () => DataT | Ref<DataT> | null
transform?: Transform
transform?: _Transform<ResT, DataT>,
pick?: PickKeys
watch?: MultiWatchSources
immediate?: boolean
Expand Down Expand Up @@ -62,35 +62,35 @@ export type AsyncData<Data, Error> = _AsyncData<Data, Error> & Promise<_AsyncDat

const getDefault = () => null
export function useAsyncData<
DataT,
ResT,
DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT, Transform, PickKeys>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null>
handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useAsyncData<
DataT,
ResT,
DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
key: string,
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT, Transform, PickKeys>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null>
handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useAsyncData<
DataT,
ResT,
DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
> (...args: any[]): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> {
DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
if (typeof args[0] !== 'string') { args.unshift(autoKey) }

// 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
if (typeof key !== 'string') {
Expand Down Expand Up @@ -138,20 +138,21 @@ export function useAsyncData<
}
asyncData.pending.value = true
// TODO: Cancel previous promise
const promise = new Promise<DataT>(
const promise = new Promise<ResT>(
(resolve, reject) => {
try {
resolve(handler(nuxt))
} catch (err) {
reject(err)
}
})
.then((result) => {
.then((_result) => {
// If this request is cancelled, resolve to the latest request.
if ((promise as any).cancelled) { return nuxt._asyncDataPromises[key] }

let result = _result as unknown as DataT
if (options.transform) {
result = options.transform(result)
result = options.transform(_result)
}
if (options.pick) {
result = pick(result as any, options.pick) as DataT
Expand Down Expand Up @@ -236,39 +237,39 @@ export function useAsyncData<
}

// 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)

return asyncDataPromise as AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE>
return asyncDataPromise as AsyncData<PickFrom<DataT, PickKeys>, DataE>
}
export function useLazyAsyncData<
DataT,
ResT,
DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null>
handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useLazyAsyncData<
DataT,
ResT,
DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
key: string,
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null>
handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null>
export function useLazyAsyncData<
DataT,
ResT,
DataE = Error,
Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
> (...args: any[]): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null> {
DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
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
return useAsyncData(key, handler, { ...options, lazy: true }, null)
}
Expand Down
44 changes: 22 additions & 22 deletions packages/nuxt/src/app/composables/fetch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { Ref } from 'vue'
import { computed, unref, reactive } from 'vue'
import { hash } from 'ohash'
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'

export type FetchResult<ReqT extends NitroFetchRequest, M extends AvailableRouterMethod<ReqT>> = TypedInternalResponse<ReqT, unknown, M>
Expand All @@ -16,12 +16,12 @@ type ComputedOptions<T extends Record<string, any>> = {
type ComputedFetchOptions<R extends NitroFetchRequest, M extends AvailableRouterMethod<R>> = ComputedOptions<NitroFetchOptions<R, M>>

export interface UseFetchOptions<
DataT,
Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
ResT,
DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
R extends NitroFetchRequest = string & {},
M extends AvailableRouterMethod<R> = AvailableRouterMethod<R>
> extends AsyncDataOptions<DataT, Transform, PickKeys>, ComputedFetchOptions<R, M> {
> extends AsyncDataOptions<ResT, DataT, PickKeys>, ComputedFetchOptions<R, M> {
key?: string
$fetch?: typeof globalThis.$fetch
}
Expand All @@ -32,23 +32,23 @@ export function useFetch<
ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: UseFetchOptions<_ResT, Transform, PickKeys, ReqT, Method>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null>
opts?: UseFetchOptions<_ResT, DataT, PickKeys, ReqT, Method>
): AsyncData<PickFrom<DataT, PickKeys>, ErrorT | null>
export function useFetch<
ResT = void,
ErrorT = FetchError,
ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
request: Ref<ReqT> | ReqT | (() => ReqT),
arg1?: string | UseFetchOptions<_ResT, Transform, PickKeys, ReqT, Method>,
arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, ReqT, Method>,
arg2?: string
) {
const [opts = {}, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2]
Expand Down Expand Up @@ -85,7 +85,7 @@ export function useFetch<
cache: typeof opts.cache === 'boolean' ? undefined : opts.cache
})

const _asyncDataOptions: AsyncDataOptions<_ResT, Transform, PickKeys> = {
const _asyncDataOptions: AsyncDataOptions<_ResT, DataT, PickKeys> = {
server,
lazy,
default: defaultFn,
Expand All @@ -101,7 +101,7 @@ export function useFetch<

let controller: AbortController

const asyncData = useAsyncData<_ResT, ErrorT, Transform, PickKeys>(key, () => {
const asyncData = useAsyncData<_ResT, ErrorT, DataT, PickKeys>(key, () => {
controller?.abort?.()
controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController

Expand All @@ -124,28 +124,28 @@ export function useLazyFetch<
ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: Omit<UseFetchOptions<_ResT, Transform, PickKeys, Method>, 'lazy'>
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null>
opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, Method>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys>, ErrorT | null>
export function useLazyFetch<
ResT = void,
ErrorT = FetchError,
ReqT extends NitroFetchRequest = NitroFetchRequest,
Method extends AvailableRouterMethod<ReqT> = 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>
> (
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
) {
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,
lazy: true
},
Expand Down
9 changes: 7 additions & 2 deletions test/fixtures/basic/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => 500 }).data).toEqualTypeOf<Ref<number | null>>()
// @ts-expect-error
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(useFetch('/test', { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>()
Expand Down Expand Up @@ -235,6 +233,13 @@ describe('composables', () => {
.toEqualTypeOf(useLazyAsyncData(() => Promise.resolve({ foo: Math.random() })))
expectTypeOf(useLazyAsyncData('test', () => 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>>()
})
})

Expand Down