Challenge: Multi-tab Sync Dashboard
Explore building a multi-tab dashboard with React Query by managing two independent caches that stay in sync via selective query invalidation. Learn to implement optimistic updates with rollback, dependent and infinite queries, and cross-tab communication to ensure efficient data fetching and UI responsiveness.
We'll cover the following...
We'll cover the following...
Problem statement
We are building a multi-tab dashboard that renders two independent app instances, Tab A and Tab B, on the same page to simulate two browser tabs. Each tab uses its own QueryClient, which means each tab maintains an isolated cache and can drift out of sync after a write.
When a write happens in one tab, that tab should broadcast ...