2022-04-11
1892
#react
Chiamaka Umeh
103049
Apr 11, 2022 ⋅ 6 min read

Pagination and infinite scroll with React Query v3

Chiamaka Umeh A frontend developer with a passion for designing highly-responsive user interfaces for JavaScript-based web and mobile apps using React and React Native.

Recent posts:

What happens when dev communities die Stack Overflow’s slow collapse

What happens when dev communities die: Stack Overflow’s slow collapse

Explore how Stack Overflow’s slow collapse affects programming and the possible future for Stack Overflow vs. generative AI competition.

Shalitha Suranga
Aug 29, 2025 ⋅ 10 min read
How to build a multimodal AI app with voice and vision in Next.js

How to build a multimodal AI app with voice and vision in Next.js

Learn how to build multimodal AI interactions to process images, audio, and even real-time video streams, using Next.js and Gemini.

Elijah Asaolu
Aug 29, 2025 ⋅ 6 min read
i tried kiro and here is what i learned

I tried out Kiro: Here’s what I learned

Check out Kiro, AWS’s AI-powered IDE, see what makes it different from other AI coding tools, and explore whether it lives up to the hype.

Elijah Asaolu
Aug 28, 2025 ⋅ 5 min read
Go Design Pattern Article Image With Logo

Why Go design patterns still matter

Here’s how three design patterns solved our Go microservices scaling problems without sacrificing simplicity.

Peter Aideloje
Aug 28, 2025 ⋅ 2 min read
View all posts

6 Replies to "Pagination and infinite scroll with React Query v3"

  1. Hello, well i would like to point a potential problem for this code.
    “`js
    const {
    isLoading,
    isError,
    error,
    data,
    fetchNextPage,
    isFetching,
    isFetchingNextPage
    } = useInfiniteQuery([‘colors’], fetchUsers, {
    getNextPageParam: (lastPage, pages) => {
    return lastPage.info.page + 1
    }
    })
    “`
    When you get the lastPage.info.page + 1 the react-query will never understand when the pages has come to an end, so to fix this you need to put a nextPage that says if theres a next page like has been done on react-query documentation https://github.com/TanStack/query/blob/main/examples/load-more-infinite-scroll/pages/index.js

  2. Hi,

    FYI – looking at your code you’re calling the fetchNextPage like this:

    Load More

    However based on the documentation, this should be avoided instead the callback should be passed like this:

    fetchNextPage()}>Load More

    You can read about it here: https://tanstack.com/query/v4/docs/guides/infinite-queries?from=reactQueryV3&original=https://react-query-v3.tanstack.com/guides/infinite-queries

    Quote from the docs:
    “Note: It’s very important you do not call fetchNextPage with arguments unless you want them to override the pageParam data returned from the getNextPageParam function. e.g. Do not do this: as this would send the onClick event to the fetchNextPage function.”

Leave a Reply