无限查询

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

无限查询（infinite queries）适用于将更多数据加载到单个缓存条目的列表。请使用 createInfiniteQueryController。

无限查询的结果包含：

data.pages：已拉取的页
data.pageParams：用于这些页的页参数
fetchNextPage 和 fetchPreviousPage
hasNextPage 和 hasPreviousPage
isFetchingNextPage 和 isFetchingPreviousPage

加载更多示例

TypeScript

1import { LitElement, html } from 'lit'2import { createInfiniteQueryController } from '@tanstack/lit-query'3 4class ProjectsList extends LitElement {5  private readonly projects = createInfiniteQueryController(this, {6    queryKey: ['projects'],7    queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),8    initialPageParam: 1,9    getNextPageParam: (lastPage) =>10      lastPage.hasMore ? lastPage.page + 1 : undefined,11  })12 13  render() {14    const query = this.projects()15 16    if (query.isPending) return html`Loading...`17    if (query.isError) return html`Error: ${query.error.message}`18 19    return html`20      ${query.data.pages.map(21        (page) => html`22          ${page.projects.map((project) => html`<p>${project.name}</p>`)}23        `,24      )}2526      <button27        ?disabled=${!query.hasNextPage || query.isFetching}28        @click=${() => this.projects.fetchNextPage()}29      >30        ${31          query.isFetchingNextPage32            ? 'Loading more...'33            : query.hasNextPage34              ? 'Load More'35              : 'Nothing more to load'36        }37      </button>38    `39  }40}

页参数

initialPageParam 是必需的。getNextPageParam 决定是否还存在下一页，以及应将什么值作为 pageParam 传递给下一次查询函数调用。

TypeScript

1createInfiniteQueryController(this, {2  queryKey: ['projects'],3  queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),4  initialPageParam: 1,5  getNextPageParam: (lastPage) =>6    lastPage.hasMore ? lastPage.page + 1 : undefined,7})

返回 undefined 或 null 表示没有下一页。

避免重叠拉取

每个无限查询缓存条目仅允许一个正在进行的拉取。如果你在后台重新拉取（background refetch）运行期间调用 fetchNextPage，可能会覆盖已有数据。你应在加载更多前禁用按钮，或检查 !query.isFetching：

TypeScript

1if (query.hasNextPage && !query.isFetching) {2  this.projects.fetchNextPage()3}

分页替代方案

如果你的 UI 每次只显示一页，则使用带页码的查询键（query key）的普通查询可能更合适。分页示例使用 createQueryController、placeholderData: keepPreviousData、预取（prefetching）和修改（mutations）来演示该模式。