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): use default type for initial value for composables (#20968)

Browse Source
This commit is contained in:
Haruaki OTAKE 2023-05-21 07:19:50 +09:00 committed by GitHub
parent 957a75a7e1
commit b88aab049f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,12 @@ export type _Transform<Input = any, Output = any> = (input: Input) => Output
export type PickFrom<T, K extends Array<string>> = T extends Array<any> export type PickFrom<T, K extends Array<string>> = T extends Array<any>
? T ? T
: T extends Record<string, any> : T extends Record<string, any>
? keyof T extends K[number] ? keyof T extends K[number]
? T // Exact same keys as the target, skip Pick ? T // Exact same keys as the target, skip Pick
: K[number] extends never : K[number] extends never
? T ? T
: Pick<T, K[number]> : Pick<T, K[number]>
: T : T
export type KeysOf<T> = Array< export type KeysOf<T> = Array<
T extends T // Include all keys of union types, not just common keys T extends T // Include all keys of union types, not just common keys
@ -32,11 +32,12 @@ export interface AsyncDataOptions<
ResT, ResT,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> { > {
server?: boolean server?: boolean
lazy?: boolean lazy?: boolean
default?: () => DataT | Ref<DataT> | null default?: () => DefaultT | Ref<DefaultT>
transform?: _Transform<ResT, DataT>, transform?: _Transform<ResT, DataT>
pick?: PickKeys pick?: PickKeys
watch?: MultiWatchSources watch?: MultiWatchSources
immediate?: boolean immediate?: boolean
@ -53,7 +54,7 @@ export interface AsyncDataExecuteOptions {
} }
export interface _AsyncData<DataT, ErrorT> { export interface _AsyncData<DataT, ErrorT> {
data: Ref<DataT | null> data: Ref<DataT>
pending: Ref<boolean> pending: Ref<boolean>
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void> refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
execute: (opts?: AsyncDataExecuteOptions) => Promise<void> execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
@ -67,32 +68,35 @@ export function useAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys> options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
export function useAsyncData< export function useAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys> options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
export function useAsyncData< export function useAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> (...args: any[]): AsyncData<PickFrom<DataT, 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<ResT>, AsyncDataOptions<ResT, DataT, PickKeys>] let [key, handler, options = {}] = args as [string, (ctx?: NuxtApp) => Promise<ResT>, AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>]
// Validate arguments // Validate arguments
if (typeof key !== 'string') { if (typeof key !== 'string') {
@ -104,7 +108,7 @@ export function useAsyncData<
// Apply defaults // Apply defaults
options.server = options.server ?? true options.server = options.server ?? true
options.default = options.default ?? getDefault options.default = options.default ?? (getDefault as () => DefaultT)
options.lazy = options.lazy ?? false options.lazy = options.lazy ?? false
options.immediate = options.immediate ?? true options.immediate = options.immediate ?? true
@ -118,13 +122,13 @@ export function useAsyncData<
// Create or use a shared asyncData entity // Create or use a shared asyncData entity
if (!nuxt._asyncData[key]) { if (!nuxt._asyncData[key]) {
nuxt._asyncData[key] = { nuxt._asyncData[key] = {
data: ref(getCachedData() ?? options.default?.() ?? null), data: ref(getCachedData() ?? options.default!()),
pending: ref(!hasCachedData()), pending: ref(!hasCachedData()),
error: toRef(nuxt.payload._errors, key) error: toRef(nuxt.payload._errors, key)
} }
} }
// TODO: Else, somehow check for conflicting keys with different defaults or fetcher // TODO: Else, somehow check for conflicting keys with different defaults or fetcher
const asyncData = { ...nuxt._asyncData[key] } as AsyncData<DataT, DataE> const asyncData = { ...nuxt._asyncData[key] } as AsyncData<DataT | DefaultT, DataE>
asyncData.refresh = asyncData.execute = (opts = {}) => { asyncData.refresh = asyncData.execute = (opts = {}) => {
if (nuxt._asyncDataPromises[key]) { if (nuxt._asyncDataPromises[key]) {
@ -167,7 +171,7 @@ export function useAsyncData<
if ((promise as any).cancelled) { return nuxt._asyncDataPromises[key] } if ((promise as any).cancelled) { return nuxt._asyncDataPromises[key] }
asyncData.error.value = error asyncData.error.value = error
asyncData.data.value = unref(options.default?.() ?? null) asyncData.data.value = unref(options.default!())
}) })
.finally(() => { .finally(() => {
if ((promise as any).cancelled) { return } if ((promise as any).cancelled) { return }
@ -248,30 +252,33 @@ export function useLazyAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
export function useLazyAsyncData< export function useLazyAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null>
export function useLazyAsyncData< export function useLazyAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, DataE | null> { DefaultT = null,
> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, 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<ResT>, AsyncDataOptions<ResT, DataT, PickKeys>] const [key, handler, options] = args as [string, (ctx?: NuxtApp) => Promise<ResT>, AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>]
// @ts-expect-error we pass an extra argument to prevent a key being injected // @ts-expect-error we pass an extra argument to prevent a key being injected
return useAsyncData(key, handler, { ...options, lazy: true }, null) return useAsyncData(key, handler, { ...options, lazy: true }, null)
} }

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

@ -19,9 +19,10 @@ export interface UseFetchOptions<
ResT, ResT,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
R extends NitroFetchRequest = string & {}, R extends NitroFetchRequest = string & {},
M extends AvailableRouterMethod<R> = AvailableRouterMethod<R> M extends AvailableRouterMethod<R> = AvailableRouterMethod<R>
> extends Omit<AsyncDataOptions<ResT, DataT, PickKeys>, 'watch'>, ComputedFetchOptions<R, M> { > extends Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'watch'>, ComputedFetchOptions<R, M> {
key?: string key?: string
$fetch?: typeof globalThis.$fetch $fetch?: typeof globalThis.$fetch
watch?: MultiWatchSources | false watch?: MultiWatchSources | false
@ -34,11 +35,12 @@ export function useFetch<
Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: UseFetchOptions<_ResT, DataT, PickKeys, ReqT, Method> opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>
): AsyncData<PickFrom<DataT, PickKeys>, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>
export function useFetch< export function useFetch<
ResT = void, ResT = void,
ErrorT = FetchError, ErrorT = FetchError,
@ -46,10 +48,11 @@ export function useFetch<
Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, ReqT, Method>, arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>,
arg2?: string arg2?: string
) { ) {
const [opts = {}, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2] const [opts = {}, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2]
@ -91,7 +94,7 @@ export function useFetch<
cache: typeof opts.cache === 'boolean' ? undefined : opts.cache cache: typeof opts.cache === 'boolean' ? undefined : opts.cache
}) })
const _asyncDataOptions: AsyncDataOptions<_ResT, DataT, PickKeys> = { const _asyncDataOptions: AsyncDataOptions<_ResT, DataT, PickKeys, DefaultT> = {
server, server,
lazy, lazy,
default: defaultFn, default: defaultFn,
@ -103,7 +106,7 @@ export function useFetch<
let controller: AbortController let controller: AbortController
const asyncData = useAsyncData<_ResT, ErrorT, DataT, PickKeys>(key, () => { const asyncData = useAsyncData<_ResT, ErrorT, DataT, PickKeys, DefaultT>(key, () => {
controller?.abort?.() controller?.abort?.()
controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
@ -127,11 +130,12 @@ export function useLazyFetch<
Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, Method>, 'lazy'> opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, Method>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys>, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>
export function useLazyFetch< export function useLazyFetch<
ResT = void, ResT = void,
ErrorT = FetchError, ErrorT = FetchError,
@ -139,15 +143,16 @@ export function useLazyFetch<
Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>, Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>,
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT> PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
arg1?: string | Omit<UseFetchOptions<_ResT, DataT, PickKeys, Method>, 'lazy'>, arg1?: string | Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, 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, PickKeys>(request, { return useFetch<ResT, ErrorT, ReqT, DefaultT, _ResT, PickKeys>(request, {
...opts, ...opts,
lazy: true lazy: true
}, },

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

@ -275,13 +275,13 @@ describe('composables', () => {
expectTypeOf(useCookie('test', { default: () => 500 })).toEqualTypeOf<Ref<number>>() expectTypeOf(useCookie('test', { default: () => 500 })).toEqualTypeOf<Ref<number>>()
useCookie<number | null>('test').value = null useCookie<number | null>('test').value = null
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>>()
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>>()
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<string | number>>()
expectTypeOf(useAsyncData('test', () => Promise.resolve('500'), { default: () => 500 }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useAsyncData('test', () => Promise.resolve('500'), { default: () => 500 }).data).toEqualTypeOf<Ref<string | number>>()
expectTypeOf(useFetch('/test', { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useFetch('/test', { default: () => ref(500) }).data).toEqualTypeOf<Ref<unknown>>()
expectTypeOf(useFetch('/test', { default: () => 500 }).data).toEqualTypeOf<Ref<number | null>>() expectTypeOf(useFetch('/test', { default: () => 500 }).data).toEqualTypeOf<Ref<unknown>>()
}) })
it('infer request url string literal from server/api routes', () => { it('infer request url string literal from server/api routes', () => {
@ -313,11 +313,11 @@ describe('composables', () => {
.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 // 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(useAsyncData('test', () => Promise.resolve({ foo: { bar: 500 } }), { default: () => ({ bar: 500 }), transform: v => v.foo }).data).toEqualTypeOf<Ref<{ bar: number }>>()
expectTypeOf(useLazyAsyncData('test', () => Promise.resolve({ foo: { bar: 500 } }), { default: () => ({ bar: 500 }), transform: v => v.foo })) 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 })) .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(useFetch('/api/hey', { default: () => 1, transform: v => v.foo }).data).toEqualTypeOf<Ref<string | number>>()
expectTypeOf(useLazyFetch('/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>>()
}) })
it('uses types compatible between useRequestHeaders and useFetch', () => { it('uses types compatible between useRequestHeaders and useFetch', () => {