How Not to Use TanStack Query
summary
Adopts TanStack Query as a server-state cache but misuses blanket invalidations around a gamification system of 100 gamification actions, causing cascades that hit 1,400 requests/sec and produce as many as 150 requests per click. Remedies: debounce/queueing cuts repeated actions (requests drop from 66 to 11), abort controllers and disabling retries for hotspots, and finally returning the full gamification payload and using setQueryData to update cache so GETs become rare and the DB load subsides.
AI-written summary · about
chapters (7)
- 0:00TanStack Query misuse
- 3:36Why we chose TanStack Query
- 7:25Performance disaster begins
- 11:39Fixing request overload
- 17:34Myths on staleTime and cacheTime
- 20:46TanStack Query best practices
- 22:29Closing
related talks
54mTanStack Query Revolution: Finally Good State Management
45mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: A Pragmatic Case Study
44mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: Case Study
03mManage external data querying using TanStack Vue Query
29mEfficient server state management
22mFrom 3000ms to 300ms: Lessons learned from optimizing Tanstack ...
52mManaging Remote State in React
24mPrickly by Nature: TanStack in the Wild