Search code examples
reactjsinfinite-scrollreact-query

Infinite scroll using react query for local json data

I have to implement infinite scroll using react query for the JSON data, I don't want to fetch the data from server when the page changes, i need to show the data already i have.

I am confused, how to achieve this ?

  1. I have JSON data
  2. I need to fetch the data using react query hook useInfiniteQuery
  3. implement the scroll with those data
Solution

  • infinite scrolling per se has nothing to do with react-query. It seems that you just want to fetch the complete json data with a useQuery, then only render the first N elements and render some more when you scroll to the bottom of the screen.

    useInfiniteQuery is meant for server-side infinite scrolling, where you make another call to your api when you reach the bottom of the screen, e.g. like the facebook/twitter timeline does it. I don't think it applies to your case if you only want this "locally"