useInfiniteQuery

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

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
  • 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.
• 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).