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:

Fix over-caching with dynamic IO caching in Next.js 15

Next.js 15 caching overhaul: Fix overcaching with Dynamic IO and the use cache directive.

David Omotayo
Aug 6, 2025 ⋅ 10 min read
LLMs are facing a QA crisis here’s how we could solve it

LLMs are facing a QA crisis: Here’s how we could solve it

LLM QA isn’t just a tooling gap — it’s a fundamental shift in how we think about software reliability.

Rosario De Chiara
Aug 4, 2025 ⋅ 7 min read

Windsurf vs. Cursor: When to choose the challenger

Windsurf AI brings agentic coding and terminal control right into your IDE. We compare it to Cursor, explore its features, and build a real frontend project.

Chizaram Ken
Jul 31, 2025 ⋅ 9 min read

The CSS if() function: Conditional styling will never be the same

The CSS Working Group has approved the if() function for development, a feature that promises to bring true conditional styling directly to our stylesheets.

Ikeh Akinyemi
Jul 30, 2025 ⋅ 12 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