Echtzeit-Dashboards mit React Query und WebSocket bauen
Wie wir TanStack React Query mit WebSocket-Events kombinieren, um Dashboards zu bauen, die sich in Echtzeit aktualisieren. ohne Polling oder manuelles Refetching.
Als wir das OMS-Modul für BeproCRM bauten, war eine der Hauptanforderungen Echtzeit-Bestellaktualisierungen. Manager mussten neue Bestellungen, Statusänderungen und Verspätungswarnungen sehen, ohne die Seite zu aktualisieren. Das ist das Muster, für das wir uns entschieden haben.
Das Problem mit Polling
Der naive Ansatz ist Polling, Daten alle N Sekunden abrufen. Aber Polling verschwendet Bandbreite, wenn sich nichts ändert, und fühlt sich träge an, wenn sich etwas ändert. Für ein Dashboard mit 5 verschiedenen Datenpanels erzeugt Polling unnötige Serverlast und eine schlechte Benutzererfahrung.
WebSocket + React Query Invalidierung
Unser Ansatz: WebSocket-Events lösen React Query Cache-Invalidierung aus. Die WebSocket-Verbindung lauscht auf spezifische Events (order.created, order.updated, payment.received). Wenn ein Event eintrifft, invalidieren wir die relevanten Query-Keys, und React Query ruft automatisch die veralteten Daten erneut ab.
Das gibt uns das Beste aus beiden Welten. Daten sind immer frisch, weil wir bei tatsächlichen Änderungen erneut abrufen, und wir nutzen React Querys eingebautes Caching, Deduplizierung und Ladezustände, anstatt eigenes State Management zu bauen.
Praktische Überlegungen
Reconnection-Handling. WebSocket-Verbindungen brechen ab. Wir nutzen exponentielles Backoff mit Jitter für die Wiederverbindung, und bei Reconnect invalidieren wir alle Queries, um sicherzustellen, dass wir keine Events während des Verbindungsabbruchs verpasst haben.
Selektive Invalidierung. Nicht jedes WebSocket-Event sollte jede Query erneut abrufen. Wir mappen Event-Typen auf spezifische Query-Keys, sodass ein Bestell-Update nur bestellbezogene Queries erneut abruft, nicht das gesamte Dashboard.
Optimistische Updates. Für Aktionen des aktuellen Benutzers (wie das Ändern eines Bestellstatus) aktualisieren wir den Cache optimistisch, bevor der Server bestätigt. Das lässt die UI sofort reagieren, während das WebSocket-Event die Änderung für alle anderen verbundenen Benutzer bestätigt.
Das Ergebnis
Das BeproCRM-Dashboard aktualisiert sich innerhalb von 200ms nach jeder Änderung für alle verbundenen Benutzer. Kein Polling, keine manuellen Aktualisierungsbuttons, keine veralteten Daten. Es ist die Art von Echtzeiterlebnis, die interne Tools modern und vertrauenswürdig erscheinen lässt.
