---
title: "Refresh every view a change touches · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/client-and-server-state/refresh-after-change
updated: 2026-10-20
licence: "All rights reserved"
---

# Refresh every view a change touches

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state)
- Rule: After a successful change, update or refetch every cached query that shows the changed record, including lists, counts and totals.
- How: Group keys so one call can refresh a family, such as everything under an account's orders. When the answer holds the full updated record, write it into the detail query at once, then mark the lists stale. In htmx, send an `HX-Trigger` header that names the event other panels listen for.
- Check: A test edits an order's status on its detail screen, then opens the list and the dashboard count. Both show the new status without a page reload.

Example:

```ts
export function useUpdateOrder(accountId: string) {
  return useMutation({
    mutationFn: (change: OrderChange) => api.updateOrder(accountId, change),
    onSuccess: (order, _change, _result, context) => {
      context.client.setQueryData(['accounts', accountId, 'orders', order.id], order);
      return context.client.invalidateQueries({ queryKey: orderKeys.all(accountId) });
    },
  });
}
```

```python
@app.patch("/orders/<order_id>/status")
def change_status(order_id):
    order = orders.change_status(current_user().account_id, order_id, request.form["status"])
    response = make_response(render_template("orders/_row.html", order=order))
    response.headers["HX-Trigger"] = "order-changed"
    return response
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/client-and-server-state/refresh-after-change`.

- Previous: [Show the answer to the latest request only](https://agentwranglers.se/playbook/app-ui/client-and-server-state/latest-request-wins)
- Next: [Undo optimistic updates that fail](https://agentwranglers.se/playbook/app-ui/client-and-server-state/optimistic-with-rollback)
- [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state)