Adding Infinite Scroll to Theo's T3 Tutorial app
Hi All,
I was able to replicate Theo's T3 Tutorial app and I am now adding new features to it. I have hit a big roadblock and would appreciate any help. I am trying to enable infinite scroll on the posts ( I call them stories). Theo's implementation fetched a hardcoded 100 posts, and I'm trying to get the posts to load batch by batch as the user scrolls.
I'm getting this error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I have tried a few ideas from this page: https://github.com/facebook/react/issues/13991#issuecomment-449597362, but none of them have worked so far.
Thinking that I might be running two Reacts, I added these to my package.json file:
"peerDependencies": {
"react": "18.2.0",
"react-dom": "18.2.0"
},
"resolutions": {
"/react": "18.2.0",
"/react-dom": "18.2.0"
},
(The resolution paths start with double asterisks, but removed them as asterisks seem to be used for formatting here) I deleted the node_modules and .next folders to get fresh copies of these; These didn't work.
I also tried adding the below alias to my next.config.mjs
alias: {
react: path.resolve('./node_modules/react')
}
Still working on it, but would appreciate any new ideas. See the code in the attached image.
7 Replies
Here is my version with infinite scroll and many other features:https://github.com/Apestein/chirp
Also you can use this infinite scroll component that I made:https://github.com/Apestein/better-react-infinite-scroll
Post your repo if you want help btw, nobody can see that code in the picture
Thank you so much @Apestein for sharing your work. You look like a pro. I'm not a developer, so I'm sure I'll learn a lot from your code. My implementation was supposed to be a "minor" replacement of useQuery with useInfiniteQuery. The project is for an MVP I'm building, so I'm keeping the repo private (will share the product after launch). I'd be happy to share any components I build. I have been working on the posts mostly; I have a share button, a like button a helpful button, a back button on single posts to the "same" post on the Allposts page. I'll share an image of the post card.
I was using fontawesome for all the icons, but then I saw your heart svg, stole it, and replaced all the other ones with svgs I found or built. So thanks for the heart as well. let me know if that's not ok.
btw, you have earned my stars on github
looks good to me, glad to help
One question @Apestein In your implementation you are getting all the posts from the server in batches and then aggregating them so your infinitescroller component goes through the list of all posts on the client and reveals them batch by batch? Is that a common implementation? what if there are 10000 posts? Wouldn't it be better to fetch each batch from the server as we reach the end of the page with each scroll until all posts are fetched?
@Apestein Never mind. Finally got the initial code to work.
No, the infinitescroller will call the fetchNextPage function which fetch the next batch from the server. In case you're still confused.