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传入所有能传给injectQuery的参数。这些选项可在函数与命令式 API（例如queryClient.fetchQuery）之间共享。options.queryKey是必需的，它指定了用于生成选项的查询键。UnusedSkipTokenOptions→UnusedSkipTokenOptions & QueryKeyWithDataTag：你通常可以向queryOptions传入所有能传给injectQuery的参数。这些选项可在函数与命令式 API（例如queryClient.fetchQuery）之间共享。options.queryKey是必需的，它指定了用于生成选项的查询键。UndefinedInitialDataOptions→UndefinedInitialDataOptions & QueryKeyWithDataTag：你通常可以向queryOptions传入所有能传给injectQuery的参数。这些选项可在函数与命令式 API（例如queryClient.fetchQuery）之间共享。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/angular-query-experimental/src/query-options.ts:149
你通常可以向 queryOptions 传入所有能传给 injectQuery 的参数。这些选项可在函数与命令式 API（例如 queryClient.fetchQuery）之间共享。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 —— 即所有可传给 injectQuery 的参数，且 initialData 已知被定义。
返回值
DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
相同选项对象，其类型经过增强，使 queryKey 携带推断出的数据类型。
参见
- 使用 injectQuery 运行具有这些选项的查询。
- 查询选项 API 了解该模式的更多细节。
示例
1import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental'2 3export const postsOptions = queryOptions({4 queryKey: ['posts'],5 queryFn: fetchPosts,6 initialData: [],7})8 9@Component({10 selector: 'posts',11 template: `12 <!-- `postsQuery.data()` is never `undefined`, thanks to `initialData` — even if a refetch13 fails, so the list stays visible alongside the error. -->14 @if (postsQuery.isError()) {15 <span>Error: {{ postsQuery.error()?.message }}</span>16 }17 <ul>18 @for (post of postsQuery.data(); track post.id) {19 <li>{{ post.title }}</li>20 }21 </ul>22 `,23})24export class Posts {25 readonly postsQuery = injectQuery(() => postsOptions)26}调用签名
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/angular-query-experimental/src/query-options.ts:196
你通常可以向 queryOptions 传入所有能传给 injectQuery 的参数。这些选项可在函数与命令式 API（例如 queryClient.fetchQuery）之间共享。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 —— 即所有可传给 injectQuery 的参数。
返回值
UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
相同选项对象，其类型经过增强，使 queryKey 携带推断出的数据类型。
参见
- 使用 injectQuery 运行具有这些选项的查询。
- 查询选项 API 了解该模式的更多细节。
示例
参数化工厂，以便每个 id 均可复用同一选项对象：
1import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental'2 3export const postOptions = (id: string) =>4 queryOptions({5 queryKey: ['post', id],6 queryFn: () => fetchPost(id),7 })8 9@Component({10 selector: 'post',11 template: `12 @if (postQuery.isPending()) {13 Loading...14 } @else if (postQuery.isError()) {15 <span>Error: {{ postQuery.error()?.message }}</span>16 } @else {17 <h1>{{ postQuery.data().title }}</h1>18 }19 `,20})21export class Post {22 readonly id = signal('1')23 readonly postQuery = injectQuery(() => postOptions(this.id()))24}调用签名
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/angular-query-experimental/src/query-options.ts:274
你通常可以向 queryOptions 传入所有能传给 injectQuery 的参数。这些选项可在函数与命令式 API（例如 queryClient.fetchQuery）之间共享。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 —— 即所有可传给 injectQuery 的参数。
返回值
UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
相同选项对象，其类型经过增强，使 queryKey 携带推断出的数据类型。
备注
这是唯一接受 queryFn: skipToken 的重载，如下所示。
参见
- 使用 injectQuery 运行具有这些选项的查询。
- 查询选项 API 了解该模式的更多细节。
示例
参数化工厂，以便每个 id 均可复用同一选项对象：
1import { queryOptions, injectQuery } from '@tanstack/angular-query-experimental'2 3export const postOptions = (id: string) =>4 queryOptions({5 queryKey: ['post', id],6 queryFn: () => fetchPost(id),7 })8 9@Component({10 selector: 'post',11 template: `12 @if (postQuery.isPending()) {13 Loading...14 } @else if (postQuery.isError()) {15 <span>Error: {{ postQuery.error()?.message }}</span>16 } @else {17 <h1>{{ postQuery.data().title }}</h1>18 }19 `,20})21export class Post {22 readonly id = signal('1')23 readonly postQuery = injectQuery(() => postOptions(this.id()))24}禁用查询的工厂，类型安全，直到 postId 被设置：
1import { queryOptions, skipToken, injectQuery } from '@tanstack/angular-query-experimental'2 3export const postOptions = (postId: number | undefined) =>4 queryOptions({5 queryKey: ['post', postId],6 queryFn: postId != null ? () => fetchPost(postId) : skipToken,7 })8 9@Component({10 selector: 'post',11 template: `12 @if (postId() == null) {13 Select a post14 } @else if (postQuery.isPending()) {15 Loading...16 } @else if (postQuery.isError()) {17 <span>Error: {{ postQuery.error()?.message }}</span>18 } @else {19 <h1>{{ postQuery.data().title }}</h1>20 }21 `,22})23export class Post {24 readonly postId = signal<number | undefined>(undefined)25 readonly postQuery = injectQuery(() => postOptions(this.postId()))26}参数
options
UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
要使用的 UndefinedInitialDataOptions —— 即所有可传给 injectQuery 的参数。
options 属性
基于 CreateQueryOptions 构建。参见上方类型定义以了解其变更内容。
返回值
UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>
相同选项对象，其类型经过增强，使 queryKey 携带推断出的数据类型。
返回值属性
基于 CreateQueryOptions、QueryKeyWithDataTag 构建。参见上方类型定义以了解其变更内容。