useInfiniteQuery

1 const {
2   fetchNextPage,
3   fetchPreviousPage,
4   hasNextPage,
5   hasPreviousPage,
6   isFetchingNextPage,
7   isFetchingPreviousPage,
8   ...result
9 } = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
10   ...options,
11   getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
12   getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
13 })

Options

The options for useInfiniteQuery are identical to the useQuery hook with the addition of the following:

• queryFn: (context: QueryFunctionContext) => Promise<TData>
  • Required, but only if no default query function has been defined defaultQueryFn
  • The function that the query will use to request data.
  • Receives a QueryFunctionContext object with the following variables:
    • queryKey: QueryKey
    • pageParam: unknown | undefined
  • Must return a promise that will either resolves data or throws an error.
  • Make sure you return the data and the pageParam if needed for use in the props below.
• getNextPageParam: (lastPage, allPages) => unknown | undefined
  • When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages.
  • It should return a single variable that will be passed as the last optional parameter to your query function.
  • Return undefined to indicate there is no next page available.
• getPreviousPageParam: (firstPage, allPages) => unknown | undefined
  • When new data is received for this query, this function receives both the first page of the infinite list of data and the full array of all pages.
  • It should return a single variable that will be passed as the last optional parameter to your query function.
  • Return undefined to indicate there is no previous page available.

Returns

The returned properties for useInfiniteQuery are identical to the useQuery hook, with the addition of the following:

• data.pages: TData[]
  • Array containing all pages.
• data.pageParams: unknown[]
  • Array containing all page params.
• isFetchingNextPage: boolean
  • Will be true while fetching the next page with fetchNextPage.
• isFetchingPreviousPage: boolean
  • Will be true while fetching the previous page with fetchPreviousPage.
• fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
  • This function allows you to fetch the next "page" of results.
  • options.pageParam: unknown allows you to manually specify a page param instead of using getNextPageParam.
• fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
  • This function allows you to fetch the previous "page" of results.
  • options.pageParam: unknown allows you to manually specify a page param instead of using getPreviousPageParam.
• hasNextPage: boolean
  • This will be true if there is a next page to be fetched (known via the getNextPageParam option).
• hasPreviousPage: boolean
  • This will be true if there is a previous page to be fetched (known via the getPreviousPageParam option).