DEV Community

mhrrmk for Refine

Posted on • Edited on

9 6 1 1 1

Undoable Updates in React Query

An undoable update is the version of an optimistic update where the actual mutation for the update is executed after a certain amount of time so that the mutation can be undone in that period of time.

Example of an undoable update in a refine app

Key factor is that mutation function for the useMutation needs to return a promise. We return a promise where the actual mutation function(fetch e.g. ) is executed in a timeout and the promise that we return is resolved when the mutation function is resolved. 

Undoing the mutation requires to cancel the timeout and the promise to be rejected so that the previous state of the query is recovered via onError.

The function to cancel the mutation is made accessible for a cancel button by holding it in a ref.


There are plenty opportunities to improve upon like managing various states along the flow of undoing an update or integrating with a notification system. I hope this was helpful.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
donahldstump profile image
Donald Stump

thank you for dis. is there any code samples?

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More