Efficient server state management
summary
Shows a concrete migration path to TanStack Query v5 for Vue with the TanStack Query v5 optionQuery API and demo code using Nuxt with SSR turned off plus Supabase and Tailwind, so it is not just theory. Implements placeholderData from list cache to avoid blank detail pages, demonstrates prefetch on mouseover, and performs optimistic updates via queryClient (cancel/get/set) and invalidateQueries. Everything in the demo runs end to end so you see what works and what needs stitching.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:40Server vs client state
- 3:51Client vs server state differences
- 5:59Server state challenges
- 8:30TanStack Query intro
- 10:35TanStack Query concepts
- 11:58Query config and usage
- 13:22Query staleness and revalidation
- 14:28Mutation handling
- 15:54QueryClient and advanced ops
- 16:36Demo setup
- 18:25Fetching data
- 19:50Query optimization
- 20:53Cached data for placeholders
- 23:01Prefetching on hover
- 24:53Mutations and invalidation
- 26:41Optimistic updates
- 27:24Resources and reading
- 28:07Alternatives to TanStack Query
- 29:00Closing and Q&A
related talks
44mData Management in Vue
03mManage external data querying using TanStack Vue Query
54mTanStack Query Revolution: Finally Good State Management
45mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: A Pragmatic Case Study
28mLocal state and server cache: how to balance them with vue-query
24mLocal State and Server Cache: Finding a Balance
52mManaging Remote State in React
44mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: Case Study