MENU

Fun & Interesting

TanStack React Query v5 - Full Guide (Setup, Mutations, Infinite Loading, Optimistic Updates)

Coding in Flow 6,047 2 weeks ago
Video Not Working? Fix It Now

Learn & master TanStack React Query v5 with this one video! Including useQuery, useInfiniteQuery, useMutation, optimistic updates, and more. Starting code: https://github.com/codinginflow/react-query-v5-tutorial/tree/Starting-Point Finished project: https://github.com/codinginflow/react-query-v5-tutorial ⭐ 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 - What is React Query and why should you use it? 4:05 - Starting code 6:21 - Why you shouldn't fetch in useEffect 19:15 - React Query installation & setup (queryClient, QueryClientProvider, React Query Devtools) 24:02 - Basic useQuery usage, queryKey best practices, error retries 36:24 - Search with React Query (debounced) 43:46 - Infinite loading (useInfiniteQuery) 56:19 - Custom hook 57:46 - Mutations (useMutation), invalidateQueries 1:09:27 - Updating the cache (setQueryData, InfiniteData) 1:19:35 - Optimistic updates (onMutate), error rollbacks

Comment