Izgradnja real-time kontrolnih tabli sa React Query i WebSocket-om
Kako kombinujemo TanStack React Query sa WebSocket događajima da gradimo kontrolne table koje se ažuriraju u realnom vremenu bez polling-a ili ručnog refetch-a.
Kada smo gradili OMS modul za BeproCRM, jedan od ključnih zahtjeva bio je ažuriranje narudžbina u realnom vremenu. Menadžeri su morali da vide nove narudžbine, promjene statusa i upozorenja o kašnjenju bez osvježavanja stranice. Ovo je obrazac na koji smo se odlučili.
Problem sa polling-om
Naivni pristup je polling, preuzimanje podataka svake N sekundi. Ali polling troši propusnost kada se ništa ne mijenja, a djeluje tromo kada se nešto promijeni. Za kontrolnu tablu sa 5 različitih panela podataka, polling stvara nepotrebno opterećenje servera i loše korisničko iskustvo.
WebSocket + React Query invalidacija
Naš pristup: WebSocket događaji pokreću invalidaciju React Query keša. WebSocket konekcija osluškuje specifične događaje (order.created, order.updated, payment.received). Kada događaj stigne, invalidiramo relevantne ključeve upita, a React Query automatski ponovo preuzima zastarele podatke.
Ovo nam daje najbolje od oba svijeta. podaci su uvijek sveži jer preuzimamo na osnovu stvarnih promena, a koristimo ugrađeno keširanje React Query-ja, deduplikaciju i stanja učitavanja umjesto da gradimo prilagođeno upravljanje stanjem.
Praktična razmatranja
Rukovanje ponovnim povezivanjem. WebSocket konekcije padaju. Koristimo eksponencijalni backoff sa jitter-om za ponovno povezivanje, a pri ponovnom povezivanju invalidiramo sve upite da bismo osigurali da nismo propustili događaje tokom perioda prekida.
Selektivna invalidacija. Ne bi svaki WebSocket događaj trebao da pokrene preuzimanje svakog upita. Mapiramo tipove događaja na specifične ključeve upita tako da ažuriranje narudžbine samo ponovo preuzima upite vezane za narudžbine, ne cijelu kontrolnu tablu.
Optimistička ažuriranja. Za akcije koje pokreće trenutni korisnik (poput promjene statusa narudžbine), ažuriramo keš optimistički pre nego što server potvrdi. Ovo čini da UI djeluje trenutno dok WebSocket događaj potvrđuje promenu za sve ostale povezane korisnike.
Rezultat
BeproCRM kontrolna tabla se ažurira u roku od 200ms od bilo koje promjene za sve povezane korisnike. Bez polling-a, bez dugmadi za ručno osvežavanje, bez zastarelih podataka. To je vrsta real-time iskustva koja čini da se interni alati osjećaju moderno i pouzdano.
