queryOptions
概述
1function queryOptions<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;2function queryOptions<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(options: UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>): UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;3function queryOptions<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;DefinedInitialDataOptions→DefinedInitialDataOptions & QueryKeyWithDataTag:你通常可以向queryOptions传入所有能传给useQuery的参数。这些选项可在各类 Hook 及命令式 API(例如queryClient.query)之间共享。options.queryKey是必需参数,用于指定生成选项所依据的查询键。UnusedSkipTokenOptions→UnusedSkipTokenOptions & QueryKeyWithDataTag:你通常可以向queryOptions传入所有能传给useQuery的参数。这些选项可在各类 Hook 及命令式 API(例如queryClient.query)之间共享。options.queryKey是必需参数,用于指定生成选项所依据的查询键。UndefinedInitialDataOptions→UndefinedInitialDataOptions & QueryKeyWithDataTag:你通常可以向queryOptions传入所有能传给useQuery的参数。这些选项可在各类 Hook 及命令式 API(例如queryClient.query)之间共享。options.queryKey是必需参数,用于指定生成选项所依据的查询键。
调用签名
1function queryOptions<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;定义于:packages/preact-query/src/queryOptions.ts:142
你通常可以向 queryOptions 传入所有能传给 useQuery 的参数。这些选项可在各类 Hook 及命令式 API(例如 queryClient.query)之间共享。options.queryKey 是必需参数,用于指定生成选项所依据的查询键。
当 initialData 已知为已定义时,将选用此重载,因此生成的 data 永远不会是 undefined(除非某个 select 将 TData 更改为包含 undefined)。
类型参数
TQueryFnData
TQueryFnData = unknown
TError
TError = Error
TData
TData = TQueryFnData
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
参数
options
DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
要使用的 DefinedInitialDataOptions —— 即所有可传给 useQuery 的参数,且 initialData 已知为已定义。
返回值
DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
同一选项对象,其类型被限定为使 queryKey 携带推断出的数据类型。
参阅
示例
1import { queryOptions, useQuery } from '@tanstack/preact-query'2 3export const postsOptions = queryOptions({4 queryKey: ['posts'],5 queryFn: fetchPosts,6 initialData: [],7})8 9function Posts() {10 // `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,11 // so the list stays visible alongside the error.12 const { data, isError, error } = useQuery(postsOptions)13 14 return (15 <div>16 {isError ? <span>Error: {error.message}</span> : null}17 <ul>18 {data.map((post) => <li key={post.id}>{post.title}</li>)}19 </ul>20 </div>21 )22}调用签名
1function queryOptions<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(options: UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>): UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;定义于:packages/preact-query/src/queryOptions.ts:181
你通常可以向 queryOptions 传入所有能传给 useQuery 的参数。这些选项可在各类 Hook 及命令式 API(例如 queryClient.query)之间共享。options.queryKey 是必需参数,用于指定生成选项所依据的查询键。
类型参数
TQueryFnData
TQueryFnData = unknown
TError
TError = Error
TData
TData = TQueryFnData
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
参数
options
UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>
要使用的 UnusedSkipTokenOptions —— 即所有可传给 useQuery 的参数。
返回值
UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
同一选项对象,其类型被限定为使 queryKey 携带推断出的数据类型。
参阅
示例
参数化工厂函数,以便每个 id 均可复用同一选项对象:
1import { queryOptions, useQuery } from '@tanstack/preact-query'2 3export const postOptions = (id: string) =>4 queryOptions({5 queryKey: ['post', id],6 queryFn: () => fetchPost(id),7 })8 9function Post({ id }: { id: string }) {10 const { data, isPending, isError, error } = useQuery(postOptions(id))11 12 if (isPending) return 'Loading...'13 if (isError) return <span>Error: {error.message}</span>14 15 return <h1>{data.title}</h1>16}调用签名
1function queryOptions<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;定义于:packages/preact-query/src/queryOptions.ts:242
你通常可以向 queryOptions 传入所有能传给 useQuery 的参数。这些选项可在各类 Hook 及命令式 API(例如 queryClient.query)之间共享。options.queryKey 是必需参数,用于指定生成选项所依据的查询键。
类型参数
TQueryFnData
TQueryFnData = unknown
TError
TError = Error
TData
TData = TQueryFnData
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
参数
options
UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
要使用的 UndefinedInitialDataOptions —— 即所有可传给 useQuery 的参数。
返回值
UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
同一选项对象,其类型被限定为使 queryKey 携带推断出的数据类型。
备注
这是唯一接受 queryFn: skipToken 的重载,如下所示。
参阅
示例
参数化工厂函数,以便每个 id 均可复用同一选项对象:
1import { queryOptions, useQuery } from '@tanstack/preact-query'2 3export const postOptions = (id: string) =>4 queryOptions({5 queryKey: ['post', id],6 queryFn: () => fetchPost(id),7 })8 9function Post({ id }: { id: string }) {10 const { data, isPending, isError, error } = useQuery(postOptions(id))11 12 if (isPending) return 'Loading...'13 if (isError) return <span>Error: {error.message}</span>14 15 return <h1>{data.title}</h1>16}禁用查询的安全类型工厂函数,直到 postId 被设置为止:
1import { queryOptions, skipToken, useQuery } from '@tanstack/preact-query'2 3export const postOptions = (postId: number | undefined) =>4 queryOptions({5 queryKey: ['post', postId],6 queryFn: postId != null ? () => fetchPost(postId) : skipToken,7 })8 9function Post({ postId }: { postId: number | undefined }) {10 const { data, isLoading, isError, error } = useQuery(postOptions(postId))11 12 if (postId == null) return 'Select a post'13 if (isLoading) return 'Loading...'14 if (isError) return <span>Error: {error.message}</span>15 16 return <h1>{data?.title}</h1>17}参数
options
UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
要使用的 UndefinedInitialDataOptions —— 即所有可传给 useQuery 的参数。
options 属性
由 UseQueryOptions 构建。请参阅上方类型定义以了解其变更内容。
返回值
UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
同一选项对象,其类型被限定为使 queryKey 携带推断出的数据类型。
返回值属性
由 UseQueryOptions、QueryKeyWithDataTag 构建。请参阅上方类型定义以了解其变更内容。