Cancel stale mutate() calls if there are multiple with the same key

[ip10x]

I'm implementing a dynamic web form that calls a debounced update() after the user has changed an element in the form. After each successful update I call mutate() so that SWR updates the data object.

The problem with this is that if there are multiple update() calls (the user is going through the form quickly) SWR will update the data object with stale data for fields the user has changed after the update() call was made but before its associated mutate() resolves and SWR modifies the cache.

For example say there's a form for a Proposal data type. The Proposal has fields title & category.

Timeline for Race Condition

User Actions                         | Request / Responses
------------------------------------|------------------------------------------------
User fills in title: "Need Help!"   |
                                    | ┌── Request A: POST title = "Need Help!", category = null
                                    |
User fills in category:             |
"Programming".                      |
                                   | ┌── Request B: POST title = "Need Help!",  category = "Programming"
                                    |
                                    | └── Request A resolves
                                    |     └── `mutate()` called
                                    |
                                    | └── Request B resolves
                                    |     └── `mutate()` called
                                   |
                                    |  └── Request A mutate resolves
                                    |      └── SWR updates cache with stale data:
                                    |     { title: "test title", category: null }

React re-renders form with            |
updated data                          |
                                      |
UI now shows category = `null` ❌                                      |   
                                      |

What needs to happen instead

User Actions                         | Request / Responses
------------------------------------|------------------------------------------------
User fills in title: "Need Help!"   |
                                    | ┌── Request A: POST title = "Need Help!", category = null
                                    |
User fills in category:             |
"Programming".                      |
                                   | ┌── Request B: POST title = "Need Help!",  category = "Programming"
                                    |
                                    | └── Request A resolves
                                    |     └── `mutate()` called:
                                    |
                                    | └── Request B resolves
                                    |     └── `mutate()` called
                                   |
                                    |  └── Request A mutate resolves
                                    |      └── SWR sees that mutate() was called subsequently from request B and cancels updating the cache for Request A's mutate()
                                      |
                                    |  └── Request B mutate resolves
                                    |      └── SWR updates cache with data from latest mutate call:
                                    |     { title: "test title", category: "Programming" }
React re-renders form with            |
updated data  ✅                       |

Maybe there could also be a debounce so maybe SWR waits for a brief period to see if any additional mutate() calls come in before updating the cache with the data from the latest mutate call.

My current solution

After each successful update I call mutate() so that SWR updates the data object.

Essentially I'm going to remove these mutate calls. When the form sees that it's not being changed anymore call mutate() from my component so it only is called once. However, it would be nice is SWR handled multiple mutate() calls for me.

[ccm-eurecha]

Maybe there could also be a debounce so maybe SWR waits for a brief period to see if any additional mutate() calls come in before updating the cache with the data from the latest mutate call.

I have the same issue. I write my own debounce logic for this.

// Add or replace mutation by activityId
const queueMutation = (activityId, fn) => {
  if (!activityId || typeof fn !== "function") return;
  mutateQueue.current.set(activityId, fn);
};

// Run all queued mutations
const flushMutations = useCallback(() => {
  mutateQueue.current.forEach((fn, activityId) => {
    if (typeof fn === "function") {
      fn().then(() => {
        mutateQueue.current.delete(activityId);
      });
    }
  });
}, []);

const scheduleFlushMutations = useCallback(() => {
  if (flushTimer.current) {
    clearTimeout(flushTimer.current);
  }

  flushTimer.current = setTimeout(() => {
    flushMutations();
    flushTimer.current = null;
  }, 5000); // 5 seconds debounce
}, [flushMutations]);

Hope it helps!