How to achieve Infinite scroll in React with React Query? - infinite-scroll

Question

I want my API to fetch new data as in increase the page number when I have reached the bottom of the page, basically I want to infinite scroll with React Query.
I have literally watched all the videos out there but am still unable to figure out why isn't it working. Please help me out.
events: (30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
hasNextPage: true
There's no mention of the number of pages available in this API, or the total number of events available. The only way to check if there is a next page is through this hasNextPage: true property which returns either true or false
So I have no clue on how to do that using React-Query, I have tried multiple approaches. Can anyone please help me out on how to achieve Infinite scroll using React-Query with this data from the API.

Answer 1

useInfiniteQuery
If your API response data doesn't have any page info, you can use the second parameter returned from getNextPageParam to achieve your needs. This parameter returns an array containing all the fetched page content, so you can use its length as a basis.
Sample code:
const {
data, isLoading, fetchNextPage, hasNextPage,
} = useInfiniteQuery({
queryKey: ['someKey'],
queryFn: fetchData,
// here
getNextPageParam: (lastPage, pages) => pages.length + 1,
});

Answer 2

You can use the npm package react-infinite-scroll-component along with useInfiniteQuery hook.
This article demonstrates it in detail.

Answer 3

You have work with useInfiniteQuery and hasNextPage would be enough.
Query:
const { isFetchingNextPage, fetchNextPage, hasNextPage, data } = useInfiniteQuery(
['some-key' ,page, size],
({ pageParam = 0 }) => getList({ page: pageParam, ...params }),
{
getNextPageParam: (lastPage) => (!lastPage.last ? lastPage.number + 1 : undefined),
},
);
const inViewport = useInViewport(ref);
useEffect(() => {
if (inViewport) fetchNextPage();
}, [inViewport]);
And your list would be like this:
<div>
{data?.pages.map((page) => (
<React.Fragment key={page.number}>
{page.events.map(renderItem)}
</React.Fragment>
))}
{hasMore && (
<div className={styles.loading} ref={ref}>
{isFetchingNextPage && <Spinner/>}
</div>
)}
</div>

Answer 4

You can implement it using the component PerfectScrollbar from this package
https://www.npmjs.com/package/react-perfect-scrollbar
and by using the prop onYReachEnd you can call a function that first check if hasNextPage is true then you will need to check that you are not fetching data currently in order to not fetch all pages at same time, you can do that by check that by checking loadingGetData is false