How to remove previous pages when requesting next pages in useInfiniteQuery

[park78951]

Hi, I'm a newbie for this react-query and I have a question.

I want to show only 2 pages list using useInfiniteQuery.
For instance, in infinite scroll, I want to request third page and remove first page with scrolling down. After that, if I scroll down to the bottom, the third page and the fourth page should be rendered and the second page should be removed. Same as vice versa.

Is there any way or apis to resolve this? I found that queryClient could be really helpful but I think it couldn't be the solution for this.

when scroll down 

1 page
2 page 
-------------------
2 page
3 page
--------------------
3 page
4 page

when scroll up

2 page
3 page

---------------------

1 page
2 page

[TkDodo]

sounds like you'd rather have some form of virtualization / windowing while rendering ?

[park78951]

similar, but the point is I hope to create the infinite scroll feature with the list refreshed every 30 seconds. However, useInfiniteQuery refresh all of the pages which I requested by fetchNextPage api from the start. If I request 10 or more pages with lots of data, server has to spend lots of resources every 30 seconds and I really want to avoid it.

So, I'm looking for the way to request like 2 or 3 pages or 5 or 6 pages with other pages removed when scrolling up and down.
Can I get this feature with useInfiniteScroll?

[TkDodo]

you'd need to remove things manually from the cache (queryClient.setQueryData), as react-query never removes data from the cache unless its garbage collected.

[park78951]

Thanks, I resolved it.