Skip to main content

useInfiniteQuery

useInfiniteQuery 是 React Query 库的一个重要钩子（hook），它用于处理无限滚动或分页数据的情况。相比 useQuery，它提供了额外的功能来获取更多的数据页面，而不仅仅是刷新已有的数据。

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

Options(选项)​

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

  • queryFn: (context: QueryFunctionContext) => Promise<TData>

    • 必需，但仅当未定义默认查询函数defaultQueryFn时
    • 查询将用于请求数据的函数。
    • 接收 QueryFunctionContext
    • 必须返回一个将解析数据或抛出错误的承诺。
    • 确保返回数据以及是否 pageParam 需要在下面的 props 中使用。

  • getNextPageParam: (lastPage, allPages) => unknown | undefine

    • 当此查询收到新数据时，此函数会接收无限数据列表的最后一页和所有页面的完整数组。
    • 它应该返回一个变量，该变量将作为最后一个可选参数传递给查询函数。
    • 返回 undefined 表示没有下一页可用。

  • getPreviousPageParam: (firstPage, allPages) => unknown | undefined

    • 当此查询收到新数据时，此函数会接收无限数据列表的第一页和所有页面的完整数组。
    • 它应该返回一个变量，该变量将作为最后一个可选参数传递给查询函数。
    • 返回 undefined 表示没有上一页可用的。

Returns(返回值)​

hookuseInfiniteQuery 返回的属性与 useQuery 相同，但添加了以下内容并在 isRefetching 中略有不同：

  • data.pages: TData[]：包含所有页面的数组

  • data.pageParams: unknown[]：包含所有页面参数的数组

  • isFetchingNextPage: boolean：使用fetchNextPage获取下一页时为true

  • isFetchingPreviousPage: boolean：使用fetchPreviousPage获取上一页时为true

  • fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>

    • options.pageParam: unknown: 可以传递给查询函数的参数，通常用于指定要获取的下一页的数据
    • options.cancelRefetch: boolean: 如果设置为 true，那么在调用 fetchNextPage 时，如果有正在进行的相同的查询请求，那么这个请求将被取消，而不会重新发起

  • fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>

    • options.pageParam: unknown: 可以传递给查询函数的参数，通常用于指定要获取的上一页的数据
    • options.cancelRefetch: boolean: 与 fetchNextPage 相同

  • hasNextPage: boolean: 布尔值，表示是否还有下一个页面的数据可以获取

  • hasPreviousPage: boolean: 布尔值，表示是否还有上一个页面的数据可以获取

  • isRefetching: boolean: 布尔值，表示是否正在获取数据