Stop Refreshing Everything After Every Angular Mutation

If every save, approve, delete, or update triggers a full feature reload, you do not have a cache strategy — you have a reset button.

Dipak Ahirav

15 min read

·

3 days ago

--

Listen

Share

Press enter or click to view image in full size

A common Angular feature starts with a simple pattern.

Load some data:

readonly orders =
  signal<Order[]>([]);

loadOrders() {
  this.repository
    .getOrders()
    .subscribe(orders => {
      this.orders.set(orders);
    });
}

Then a mutation is added:

approve(orderId: string) {
  this.repository
    .approve(orderId)
    .subscribe(() => {
      this.loadOrders();
    });
}

Simple.

Reliable.

After approval, fetch the list again.

Then delete appears:

delete(orderId: string) {
  this.repository
    .delete(orderId)
    .subscribe(() => {
      this.loadOrders();
    });
}

Then edit:

save(command: UpdateOrderCommand) {
  this.repository
    .update(command)
    .subscribe(() => {
      this.loadOrders();
    });
}

Then bulk approval.