useInfiniteQuery | TanStack Query React Docs

useInfiniteQuery

tsx

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  promise,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  initialPageParam: 1,
  ...options,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
    firstPage.prevCursor,
})

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  promise,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  initialPageParam: 1,
  ...options,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
    firstPage.prevCursor,
})

选项

useInfiniteQuery 的选项与 useQuery 钩子的选项相同，但增加了以下选项：

queryFn: (context: QueryFunctionContext) => Promise<TData>
- 必需，但仅当未定义默认查询函数时 defaultQueryFn
- 查询将用于请求数据的函数。
- 接收一个 QueryFunctionContext
- 必须返回一个 Promise，该 Promise 将解析数据或抛出错误。
initialPageParam: TPageParam
- 必需
- 获取第一页时使用的默认页面参数。
getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null
- 必需
- 当此查询收到新数据时，此函数将接收无限数据列表的最后一页和所有页面的完整数组，以及页面参数信息。
- 它应该返回一个单个变量，该变量将作为最后一个可选参数传递给您的查询函数。
- 返回 undefined 或 null 表示没有下一页可用。
getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) => TPageParam | undefined | null
- 当此查询收到新数据时，此函数将接收无限数据列表的第一页和所有页面的完整数组，以及页面参数信息。
- 它应该返回一个单个变量，该变量将作为最后一个可选参数传递给您的查询函数。
- 返回 undefined 或 null 表示没有上一页可用。
maxPages: number | undefined
- 存储在无限查询数据中的最大页面数。
- 当达到最大页面数时，获取新页面将导致根据指定的方向从页面数组中删除第一页或最后一页。
- 如果为 undefined 或等于 0，则页面数不受限制
- 默认值为 undefined
- 如果 maxPages 值大于 0，则必须正确定义 getNextPageParam 和 getPreviousPageParam 以允许在需要时双向获取页面。

返回值

useInfiniteQuery 返回的属性与 useQuery 钩子的属性相同，但增加了以下属性，并且 isRefetching 和 isRefetchError 略有不同：

data.pages: TData[]
- 包含所有页面的数组。
data.pageParams: unknown[]
- 包含所有页面参数的数组。
isFetchingNextPage: boolean
- 使用 fetchNextPage 获取下一页时将为 true。
isFetchingPreviousPage: boolean
- 使用 fetchPreviousPage 获取上一页时将为 true。
fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
- 此函数允许您获取结果的下一“页”。
- options.cancelRefetch: boolean 如果设置为 true，则重复调用 fetchNextPage 将在每次调用时调用 queryFn，无论先前的调用是否已解析。此外，将忽略先前调用的结果。如果设置为 false，则重复调用 fetchNextPage 在第一次调用解析之前不会产生任何效果。默认为 true。
fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
- 此函数允许您获取结果的上一“页”。
- options.cancelRefetch: boolean 与 fetchNextPage 相同。
hasNextPage: boolean
- 如果有下一页要获取（通过 getNextPageParam 选项知道），则将为 true。
hasPreviousPage: boolean
- 如果有上一页要获取（通过 getPreviousPageParam 选项知道），则将为 true。
isFetchNextPageError: boolean
- 如果查询在获取下一页时失败，则将为 true。
isFetchPreviousPageError: boolean
- 如果查询在获取上一页时失败，则将为 true。
isRefetching: boolean
- 每当后台重新获取正在进行时都将为 true，其中_不_包括初始 pending 或获取下一页或上一页
- 与 isFetching && !isPending && !isFetchingNextPage && !isFetchingPreviousPage 相同
isRefetchError: boolean
- 如果查询在重新获取页面时失败，则将为 true。
promise: Promise<TData>
- 一个稳定的 Promise，将解析为查询结果。
- 可与 React.use() 一起使用以获取数据
- 需要在 QueryClient 上启用 experimental_prefetchInRender 功能标志。

请记住，命令式获取调用（例如 fetchNextPage）可能会干扰默认的重新获取行为，从而导致数据过时。确保仅在响应用户操作时调用这些函数，或添加诸如 hasNextPage && !isFetching 之类的条件。