译零 TransZero · TanStack Query 中文文档
主站

queryOptions

更新于 2026-11-02 Preact 查看英文原文 ↗

概述

TypeScript
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>;

另请参阅:参数 · 返回值

调用签名

TypeScript
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 携带推断出的数据类型。

参阅

示例

TypeScript
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}

调用签名

TypeScript
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 均可复用同一选项对象:

TypeScript
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}

调用签名

TypeScript
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 均可复用同一选项对象:

TypeScript
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 被设置为止:

TypeScript
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 构建。请参阅上方类型定义以了解其变更内容。

本页为 TanStack Query 文档(Preact 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de