Learn how to implement infinite scroll with React Query's useInfiniteQuery hook and the react-intersection-observer library. You'll also learn how to add new items to your list efficiently without refetching all pages.
Starting code: https://github.com/codinginflow/infinite-scroll-react-query/tree/Starting-point
Finished project: https://github.com/codinginflow/infinite-scroll-react-query
⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord
📣 Follow Coding in Flow on social media:
Twitter: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/codinginflow
Timestamps:
0:00 - Introduction
0:50 - Starting code overview + setup
3:37 - React Query installation + setup (QueryClientProvider, ReactQueryDevtools)
8:37 - Server endpoint setup (cursor pagination)
18:06 - Infinite loading with useInfiniteQuery (queryKey, queryFn, initialPageParam, getNextPageParam)
36:00 - Custom hook
38:17 - react-intersection-observer setup (infinite scroll container)
46:13 - Posting data with useMutation (variables, useQueryClient, invalidateQueries)
1:00:43 - Cache updates with setQueryData (InfiniteData)