infiniteQueryOptions
概述
1function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;2function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;3function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;DefinedInitialDataInfiniteOptions→DefinedInitialDataInfiniteOptions & QueryKeyWithDataTag:你通常可以向infiniteQueryOptions传入所有能传给injectInfiniteQuery的参数。这些选项可在函数和命令式 API(例如queryClient.fetchInfiniteQuery)之间共享。options.queryKey是必需的,它是指定用于生成选项的查询键。UnusedSkipTokenInfiniteOptions→UnusedSkipTokenInfiniteOptions & QueryKeyWithDataTag:你通常可以向infiniteQueryOptions传入所有能传给injectInfiniteQuery的参数。这些选项可在函数和命令式 API(例如queryClient.fetchInfiniteQuery)之间共享。options.queryKey是必需的,它是指定用于生成选项的查询键。UndefinedInitialDataInfiniteOptions→UndefinedInitialDataInfiniteOptions & QueryKeyWithDataTag:你通常可以向infiniteQueryOptions传入所有能传给injectInfiniteQuery的参数。这些选项可在函数和命令式 API(例如queryClient.fetchInfiniteQuery)之间共享。options.queryKey是必需的,它是指定用于生成选项的查询键。
调用签名
1function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;定义于:packages/angular-query-experimental/src/infinite-query-options.ts:177
你通常可以向 infiniteQueryOptions 传入所有能传给 injectInfiniteQuery 的参数。这些选项可在函数和命令式 API(例如 queryClient.fetchInfiniteQuery)之间共享。options.queryKey 是必需的,它是指定用于生成选项的查询键。
当 initialData 已知被定义时,将选择此重载。
类型参数
TQueryFnData
TQueryFnData
TError
TError = Error
TData
TData = InfiniteData<TQueryFnData, unknown>
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
TPageParam
TPageParam = unknown
参数
options
DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
要使用的 DefinedInitialDataInfiniteOptions —— 即所有可传给 injectInfiniteQuery 的参数,且 initialData 已知被定义。
返回值
DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>
相同选项对象,其类型已设定为使 queryKey 携带推断出的数据类型。
备注
参见 injectInfiniteQuery,了解通过按钮点击或用户滚动自动拉取后续页面的示例。
参阅
injectInfiniteQuery:使用这些选项运行无限查询。
示例
1import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental'2 3export const projectsOptions = infiniteQueryOptions({4 queryKey: ['projects'],5 queryFn: ({ pageParam }) => fetchProjects(pageParam),6 initialPageParam: 0,7 getNextPageParam: (lastPage) => lastPage.nextId,8 initialData: { pages: [], pageParams: [] },9})10 11@Component({12 selector: 'projects',13 template: `14 <!-- `projectsQuery.data()` is never `undefined`, thanks to `initialData` — even if a15 refetch fails, so the list stays visible alongside the error. -->16 <ul>17 @for (page of projectsQuery.data().pages; track $index) {18 @for (project of page.projects; track project.id) {19 <li>{{ project.name }}</li>20 }21 }22 </ul>23 `,24})25export class Projects {26 readonly projectsQuery = injectInfiniteQuery(() => projectsOptions)27}调用签名
1function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;定义于:packages/angular-query-experimental/src/infinite-query-options.ts:248
你通常可以向 infiniteQueryOptions 传入所有能传给 injectInfiniteQuery 的参数。这些选项可在函数和命令式 API(例如 queryClient.fetchInfiniteQuery)之间共享。options.queryKey 是必需的,它是指定用于生成选项的查询键。
类型参数
TQueryFnData
TQueryFnData
TError
TError = Error
TData
TData = InfiniteData<TQueryFnData, unknown>
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
TPageParam
TPageParam = unknown
参数
options
UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
要使用的 UnusedSkipTokenInfiniteOptions —— 即所有可传给 injectInfiniteQuery 的参数。
返回值
UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>
相同选项对象,其类型已设定为使 queryKey 携带推断出的数据类型。
备注
参见 injectInfiniteQuery,了解通过按钮点击或用户滚动自动拉取后续页面的示例。
参阅
injectInfiniteQuery:使用这些选项运行无限查询。
示例
一个参数化工厂,以便每个 postId 均可复用同一选项对象:
1import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental'2 3export const commentsOptions = (postId: string) =>4 infiniteQueryOptions({5 queryKey: ['post', postId, 'comments'],6 queryFn: ({ pageParam }) => fetchComments(postId, pageParam),7 initialPageParam: 0,8 getNextPageParam: (lastPage) => lastPage.nextId,9 })10 11@Component({12 selector: 'comments',13 template: `14 @if (commentsQuery.isPending()) {15 Loading...16 } @else if (commentsQuery.isError()) {17 <span>Error: {{ commentsQuery.error()?.message }}</span>18 } @else {19 <ul>20 @for (page of commentsQuery.data().pages; track $index) {21 @for (comment of page.comments; track comment.id) {22 <li>{{ comment.text }}</li>23 }24 }25 </ul>26 }27 `,28})29export class Comments {30 readonly postId = signal('1')31 readonly commentsQuery = injectInfiniteQuery(() => commentsOptions(this.postId()))32}调用签名
1function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;定义于:packages/angular-query-experimental/src/infinite-query-options.ts:319
你通常可以向 infiniteQueryOptions 传入所有能传给 injectInfiniteQuery 的参数。这些选项可在函数和命令式 API(例如 queryClient.fetchInfiniteQuery)之间共享。options.queryKey 是必需的,它是指定用于生成选项的查询键。
类型参数
TQueryFnData
TQueryFnData
TError
TError = Error
TData
TData = InfiniteData<TQueryFnData, unknown>
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
TPageParam
TPageParam = unknown
参数
options
UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
要使用的 UndefinedInitialDataInfiniteOptions —— 即所有可传给 injectInfiniteQuery 的参数。
返回值
UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>
相同选项对象,其类型已设定为使 queryKey 携带推断出的数据类型。
备注
参见 injectInfiniteQuery,了解通过按钮点击或用户滚动自动拉取后续页面的示例,以及如何使用 skipToken 在 postId 被设置前禁用查询。
参阅
injectInfiniteQuery:使用这些选项运行无限查询。
示例
一个参数化工厂,以便每个 postId 均可复用同一选项对象:
1import { infiniteQueryOptions, injectInfiniteQuery } from '@tanstack/angular-query-experimental'2 3export const commentsOptions = (postId: string) =>4 infiniteQueryOptions({5 queryKey: ['post', postId, 'comments'],6 queryFn: ({ pageParam }) => fetchComments(postId, pageParam),7 initialPageParam: 0,8 getNextPageParam: (lastPage) => lastPage.nextId,9 })10 11@Component({12 selector: 'comments',13 template: `14 @if (commentsQuery.isPending()) {15 Loading...16 } @else if (commentsQuery.isError()) {17 <span>Error: {{ commentsQuery.error()?.message }}</span>18 } @else {19 <ul>20 @for (page of commentsQuery.data().pages; track $index) {21 @for (comment of page.comments; track comment.id) {22 <li>{{ comment.text }}</li>23 }24 }25 </ul>26 }27 `,28})29export class Comments {30 readonly postId = signal('1')31 readonly commentsQuery = injectInfiniteQuery(() => commentsOptions(this.postId()))32}参数
options
UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
要使用的 UndefinedInitialDataInfiniteOptions —— 即所有可传给 injectInfiniteQuery 的参数。
options 属性
基于 CreateInfiniteQueryOptions 构建。参见上方类型定义以了解其变更内容。
返回值
UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>
相同选项对象,其类型已设定为使 queryKey 携带推断出的数据类型。
返回值属性
基于 CreateInfiniteQueryOptions、QueryKeyWithDataTag 构建。参见上方类型定义以了解其变更内容。