Introducing maxPages to infinite queries

Infinite queries is an amazing pattern that helps you build infinite lists. However, there is one issue with it before v5 – all the fetched pages are cached in memory; therefore, the more pages you see, the more memory you consume.

To prevent this from happening and improve your user experience, the maxPages option was added to the useInfiniteQuery hook. This option limits the number of pages that will be stored in the query cache.

This is what our infinite query example, seen in Chapter 5, would look like now:

const {
    isPending,
    isError,
    error,
    data,
    fetchNextPage,
    isFetchingNextPage,
    hasNextPage,
  } = useInfiniteQuery({
    queryKey: userKeys.api(),
    queryFn: getInfiniteData,
    defaultPageParam...