Invental/Review lessons/Client state that goes stale

Client state that goes stale

Refresh every store a server change touches

When a server-side change filters several resources, re-fetch every client store that caches one of them, not just the store for the thing you changed.

01 · Before and afterThe pattern

Re-hydrate the dependent stores as one unit, and keep a shared decision in the store.

TypeScript
async function setStatus(key: string, status: 'active' | 'inactive') {
  await api.patch(`/tables/${key}`, { meta: { status } });
  // the server also hides this table's fields and relations
  await Promise.all([tables.hydrate(), fields.hydrate(), relations.hydrate()]);
}
// store: one rule, used both to skip the query and to show the notice
const isPanelInactive = (p) => isInactive(p.options.table) || queryTables(p).some(isInactive);

02 · Run it on your appThe check

After an admin action changes what the server returns, does your app refresh every cached store that depends on it, or only the one you edited?

If the honest answer is no or not sure, this is worth a look before it reaches production.

Want this checked on your code?

Tell us what you are building and what worries you. We match a senior reviewer to your code and confirm scope before anything starts.

— Get in touch
hi@invental.co ↗
— Or
— What to include

A link or short description of the code or system, what you want checked, your stack, and when you need the answer. No repository access is needed until scope is agreed.

— Or leave a note
We reply within one business day.