Infinite Scroll With React Query - Everything You Need To Know (Mutations, Intersection Observer)

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)