Solution: Multi-tab Sync Dashboard
Use two isolated React Query caches to simulate real multi-tab behavior, coordinate dependent reads and infinite pagination through stable query keys, perform optimistic pin toggles with rollback, and ensure cross-tab correctness through selective invalidation broadcasts that refetch only when data becomes relevant.
We'll cover the following...
Solution
Here’s the implementation for the multi-tab sync dashboard. It features two isolated QueryClient instances to make cache boundaries explicit, stable queryKey values that prevent snapshot mixing, and enabled-gated dependent queries so account details and activity reads only start when an account is selected. It also includes a cursor-based infinite query that appends pages without resetting the list.
It implements a cache-owned write path where pin toggles apply optimistic updates across paged activity data with rollback on error, then converge via selective invalidation of the derived account summary rather than broad refetching. Finally, a lightweight BroadcastChannel sync layer propagates only the affected queryKey values to the other tab, so cross-tab correctness reconverges through targeted invalidation and conditional refetching while the UI remains stable.