Engineering notes

Engineering note

Realtime reconciliation with React Query

Publish a minimal lifecycle event after commit, invalidate only the affected React Query keys, and refetch canonical state. Realtime improves responsiveness without owning correctness.

By Raphael Mansueto · Reviewed

Let events announce change, not define truth

KudosCourts uses transactional commands for reservation state changes and purpose-built projections for player and owner views. After commit, a lightweight lifecycle event identifies what changed. The client then asks the application for current persisted state.

This keeps a delayed, repeated, or missed event from becoming the business record. The event is a prompt to reconcile, not a replacement for the committed reservation.

Invalidate the smallest coherent set of views

A reservation decision can affect summary lists, detail, the linked booking, chat, alerts, and notifications. Invalidating every query wastes bandwidth and creates visual churn; invalidating too little leaves contradictory screens. The lifecycle event carries enough identity to select the affected keys without copying the entire domain object into the message.

Use a pragmatic CQRS-style boundary

Commands own validation, locking, and mutation. Screens read projections shaped for their jobs. React Query coordinates those reads and their freshness, while the database remains authoritative. This separation is useful even without a fully event-sourced system, and the KudosCourts implementation makes no event-sourcing claim.

Design for reconnect and refetch

The client must recover after losing a subscription or returning from the background. Refetch-on-focus, explicit invalidation after local commands, and canonical detail reads close gaps that realtime delivery cannot guarantee. The result is eventual visual convergence after a transactionally correct decision.