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 hook 相同，但添加了以下内容

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

返回值

useInfiniteQuery 的返回属性与 useQuery hook 相同，但添加了以下属性，并且 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 之类的条件。