TanStack Query · Reference · all subjects

useinfinitequery & infinitequeryobserver

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

injectInfiniteQuery basic usage with Angular

injectInfiniteQuery is the Angular equivalent of useInfiniteQuery for managing infinite queries. It accepts a factory function returning an object with queryKey, queryFn, initialPageParam, getPreviousPageParam, and getNextPageParam options.

getPreviousPageParam purpose and signature

getPreviousPageParam is a function that determines if there is a previous page to fetch in an infinite query. It receives the firstPage as its argument and should return either a page parameter value or undefined if no previous page exists.

getNextPageParam purpose and signature

getNextPageParam is a function that determines if there is a next page to fetch in an infinite query. It can receive lastPage, allPages, and lastPageParam as arguments and should return either a page parameter value or undefined if no next page exists.

injectInfiniteQuery query returns data structure

The data returned from injectInfiniteQuery has a structure with pages array (containing each page's data) and pageParams array (containing the parameters used to fetch each page).

injectInfiniteQuery query.fetchNextPage method

The query object returned by injectInfiniteQuery has a fetchNextPage() method that can be called to fetch the next page of data.

injectInfiniteQuery query state properties

The query object returned by injectInfiniteQuery has the following state properties: isPending(), isError(), error(), data(), hasNextPage, isFetchingNextPage, and isFetching().

initialPageParam in infinite queries

initialPageParam is a required option in injectInfiniteQuery that specifies the initial page parameter value to use when fetching the first page of data.

maxPages option in infinite queries

maxPages is an optional configuration for injectInfiniteQuery that limits the number of pages stored in memory. When set to 3, only the 3 most recent pages are kept.

select option with infinite queries

The select option in injectInfiniteQuery can be used to transform the data structure, such as reversing the order of pages and pageParams by spreading and reversing both arrays.

Preventing duplicate fetchNextPage calls

When calling fetchNextPage() in response to user actions like reaching the end of a list, check query.isFetching() first and return early if already fetching to prevent duplicate requests.

getNextPageParam with page parameters

getNextPageParam can access lastPage, allPages (all pages fetched so far), and lastPageParam (the parameter used to fetch the last page). It should return undefined when there are no more pages, such as when lastPage is empty or when a cursor indicates the end.

getPreviousPageParam with page parameters

getPreviousPageParam can access firstPage, allPages (all pages fetched so far), and firstPageParam (the parameter used to fetch the first page). It should return undefined when there is no previous page, such as when firstPageParam is at its minimum value.

Give your agent this brain