React Query cache invalidation — 6 valós minta éles kódból
A "csak használd az invalidateQueries-t" tanács 20%-ban elég. A maradék 80%-ra ez a 6 minta kell.
A cache invalidation nehéz. Ezért a jó könyvtárak nem elrejtik — csak élesebb késeket adnak a kezedbe.
A React Query a 2026-os frontend stack egyik leghasznosabb eszköze. A Nortinia minden Next.js projektjében ez fut. A dokumentáció jó, de a gyakorlati cache invalidation mintákat senki nem írja le. Az alábbi hat valós éles kódból jön — és megment minket hetente egyszer a hibás kliens oldali állapot-szinkronizációtól.
1. Az egyszerű invalidate
A klasszikus: mutation sikere után queryClient.invalidateQueries({ queryKey: ["projects"] }). Minden projektet érintő cache-t lejárunk, újratöltjük. 80%-ban ez a helyes. A maradék 20%-ra baj, mert túl sokat invalidálunk — ez lassú és drága, ha 50 párhuzamos query van.
2. Az optimistic update
A felhasználó megnyomja a gombot, azonnal látja az eredményt, a hálózati hívás háttérben megy. Mi a cache-t előre frissítjük a mutation onMutate fázisában, aztán rollback-olunk onError-nál. Ez a pattern jó minden toggle, drag-and-drop, quick edit esetében — és a Nortinia admin alkalmazásaiban 30+ helyen használjuk.
3-6. A haladó minták
- 3. Setdata-val pontos patch: a queryClient.setQueryData a cache-t direktben módosítja — egy projekthez egy mezőt frissítesz, nem kell refetch
- 4. Partial key invalidation: queryKey: ["projects", "list"] invalidálja az összes listás queryt, de a detail queryket nem
- 5. Predicate alapú invalidation: queryClient.invalidateQueries({ predicate }) — pl. minden query, aminek a filter.status értéke "active"
- 6. Cascade invalidation events: backend websocket → kliens oldali invalidate → UI frissül. Használjuk a Finance Suite-ban, ahol több user dolgozik ugyanazon a számlán
A legnagyobb tanulság az, hogy a cache invalidation nem egy minta, hanem hat. Minden feature-nél el kell döntened, hogy melyik a helyes. Ha csak az 1. mintát használod, a UI-od frissebb lesz, mint amennyire szükséges, és a performance romlik. Ha mindenhol setQueryData-t használsz, gyorsabb lesz, de nehezebb debuggolni, mert a cache és a backend néha eltér.