Prefetching infinite query triggers infinite re-renders

[aniketbiswas21]

Describe the bug

I was trying to implement an infinite scroller using useInfiniteQuery. To improve the user experience, I decided to prefetch the next cursor's data using prefetchInfiniteQuery, whenever the response from the first one is returned

But, prefetching infinite query leads to infinite rendering. Is there a way to achieve the above?

Your minimal, reproducible example

https://codesandbox.io/s/black-hill-4g2n7y?file=/src/List.js

Steps to reproduce

1. Try uncommenting the onSuccess callback in the codesandbox. Would lead to infinite rendering

Expected behavior

The next route is prefetched and when the user clicks on the loadMore button, the data is returned from cache.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS v12.3.1

react-query version

4.0.0

TypeScript version

No response

Additional context

No response

[TkDodo]

without an exit condition, this will of course trigger an infinite render, because every fetch triggers onSuccess, which triggers another fetch, which triggers onSuccess, ...

the question is when you do you want to fetch the next page? There is no prefetching once a query is displayed because fetching the next page will just display it as well.

what we do in the examples is use an intersection observer and fetch the next page when this element gets into the viewport. This can be at the very end of the list, or e.g. 5 entries before that. That way, when the user scrolls to the "almost bottom", the fetch will happen, and by the time they are at the bottom, they will see the new entries.

[aniketbiswas21]

@TkDodo So, let's say after fetching the first page, if I want to fetch the next page in background what would be the ideal way to deal with this? Considering onSuccess is triggered for prefetching too?

P.S. The user is yet to click on the loadMore button

[TkDodo]

what would "in the background" mean here? infinite queries only have one cache that consists of multiple pages; as soon as you fetch the second page, it will be visible on the screen.

maybe you are looking for a normal useQuery like here:

query/examples/react/pagination/pages/index.js

Lines 36 to 43 in 9537fe9

	// Prefetch the next page!
	React.useEffect(() => {
	if (data?.hasMore) {
	queryClient.prefetchQuery(['projects', page + 1], () =>
	fetchProjects(page + 1),
	)
	}
	}, [data, page, queryClient])

[aniketbiswas21]

Ok, thanks.

But, I still cannot understand if we cannot prefetch the next page, for which case prefetchInfiniteQuery is used?

[TkDodo]

to prefetch it before you render it.

[aniketbiswas21]

ok understood thanks 👍