useInfiniteQuery

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。
• initialPageParam: TPageParam
  • 必需
  • 获取第一页时使用的默认页面参数。
• getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null
  • 必需
  • 当接收到此查询的新数据时，此函数会接收无限数据列表的最后一页、所有页面的完整数组以及页面参数信息。
  • 它应该返回一个单个变量，该变量将作为最后一个可选参数传递给你的查询函数。
  • 返回 undefined 或 null 表示没有下一个页面可用。
• getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) => TPageParam | undefined | null
  • 当收到此查询的新数据时，此函数将接收无限数据列表的第一页和所有页面的完整数组，以及 pageParam 信息。
  • 它应该返回一个单个变量，该变量将作为最后一个可选参数传递给你的查询函数。
  • 返回 undefined 或 null 表示没有可用的上一页。
• maxPages: number | undefined
  • 要存储在无限查询数据中的最大页数。
  • 达到最大页数时，获取新页将导致从页面数组中删除第一页或最后一页，具体取决于指定的方向。
  • 如果为 undefined 或等于 0，则页面数量不受限制
  • 默认值为 undefined
  • 如果 maxPages 值大于 0，则必须正确定义 getNextPageParam 和 getPreviousPageParam，以便在需要时允许向两个方向获取页面。

Returns (返回)

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 的条件。