usePacedMutation: No way to sync/clear mutations store after optimistic insert with server-generated IDs #893
Description
Description:
When using usePacedMutation with the following requirements:
- Optimistic UI updates (via
onMutate) - No refetch after mutation completion
- Server-generated IDs (temp ID → real ID swap on POST response)
There's no way to clear the mutations store after writing the real ID to the synced store, which causes the temp ID item to remain in the UI alongside the real ID item.
Current Behavior:
usePacedMutations({
onMutate: ({ data }) => {
// Optimistically insert with temp ID
collection.insert(data); // tempId: "temp-123"
},
mutationFn: async ({ transaction }) => {
const response = await axios.post('/item', transaction.mutations[0].changes);
const realId = response.data.id;
// Write real ID to synced store
collection.utils.writeInsert({
...transaction.mutations[0].changes,
id: realId // realId: "server-456"
});
// Problem: mutations store still contains tempId item
// Result: UI now shows BOTH temp and real items
}
});Expected Behavior:
After mutationFn completes and writes to the synced store, the temporary mutation should be removed from the mutations store automatically, or there should be a way to trigger a sync/clear to reconcile the stores.
Note:
With the collection API, returning { refetch: false } from an operation handler triggers a sync, but there's no equivalent way to achieve this from the usePacedMutation mutationFn callback.
Additional Context:
This is how I came across this issue. I've added a comment in discussion #824 that describes in full how I'm trying to achieve a queue strategy across multiple operation types.