Optimistic fetching with RTK Query

[Migolek]

Hi all!
Let me describe what I want to achieve with RTK Query. I have a project which allows a user to create a dashboard, add some things to stage, configure their settings and save to database. After that, user can preview this dashboard filled with fetched data. Also, there is a list of created dashboards, each of them you can edit and preview, delete or rename etc.
All things on the dashboard, let's call them "widgets". These widgets can be moved around the grid, resize, change content based on configurator which is another part of project. For example, in configurator you can define to show plot with some data or not, add additional title etc. All these actions edit dashboard object model and have to be saved in database.

What's the use case?
Ideally, I would like to save the dashboard after any action. For stage part, which mean move widgets and resize them, just after short delay, e.g. 2 seconds after last action. For configurator part I would like to save dashboard after every checkbox clicked, radio input selected etc. Also, there are some inputs, so the best option is to save dashboard just on blur input.
Updating dashboard object model (which is simple redux slice) do just one method. Every call of this method change something in the global dashboard model. Every change call also query PUT in database, which of course invalidate query of current selected dashboard and refetch the newest data. The new data for query I use to update current selected dashboard, and the view is updated.

What's the problem?
Imagine that you have just one widget on the board. You are moving it from position (x: 20, y: 20) to next one (40, 40), wait for save changes call and then fast move it to another position like (100, 60). After delay (2 sec) will be call save method again. And that cause problem, because after first request with position (40, 40) finish, data in store (dashboard) will be updated with position (40, 40) and widget will move to the last position. However, the second request with position (100, 60) will finish and again will be fetched data with dashboard. After that, dashboard in store is updated again and widgets jump to the right position which we set last time. That means, if you're changing a lot of widgets on dashboard and there are some request send, it causes weird behavior of jumping widgets from one position to another.

Saving dashboard after any change is necessary. The best option could be just save changes and forget about it, but UI has to be consistent with the database model. I would like to cancel all requests with mutation, except the last one to update database. Last mutation will revalidate query with dashboard data and refetch. After that slice with dashboard data is updated and UI rerender.

I am not sure is it a good solution, maybe I should split the logic and on every change update slice dashboard model, save data, but after refetch do not update store dashboard model. Just get the fetch dashboard data and use it directly in stage component to render all widgets etc.

Anyone has idea how to solve similar problem? Maybe I am just wrong and there is a better way to handle this case? Can anyone help me? As I know, it is not possible to cancel requests in RTK Query or just cancel invalidation queries during call multiple mutations?.