Search code examples
javascriptreactjsinfinite-scrollreact-query

next page data not loading with react infinite scroll


can you please check out this project? I have a feed page and some posts like 1000 and is limited to 10 per page I'm using react infinite scroll and react query to load more posts when the user scrolls at the near of the last post but it won't work I don't know if the problem is the API endpoint or what because when I use Jason placeholder API It's fine but when I use mine it's not ill appreciate it if u check it out

sandbox project: https://codesandbox.io/s/fragrant-glitter-bt3pb0?file=/src/index.tsx

my own API mock: https://uniplato.staging.uniplato.us/api/v1/mock-data

the expected behavior is that it should load the posts of the next page when scrolled to the bottom the actual behaviour is not doing this there isn't any error as I think its a logical problem

I attempted changing the API endpoint and the map function arrays the API endpoint changing worked ( i also had the change the map function i.e it wasn't pg.data.data.data it was pg.map but for my own API, I should've done it like pg.data.data.data after all the jasonplaceholder worked but mine didn't


Solution

  • Can you refer to the sandbox, I did some changes there and I used the mockup function. The issue was with the getNextPageParam most likely.

    Code Sand Box Link