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

infiniteQueryOptions

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

概述

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

另请参阅:参数 · 返回值

调用签名

TypeScript
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:使用这些选项运行无限查询。

示例

angular-ts
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}

调用签名

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

angular-ts
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}

调用签名

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

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

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

译自上游 59d11de