Suggestion: Recipe for auto save using RTK Query

[einarq]

I'm trying to replace some custom loading and saving logic in my app with RTKQ.
This app is using auto-save, and its currently storing form state in redux (not recommended I know, but works fine for us in this case, and would be problematic to refactor right now).

The main issue I'm facing now is related to invalidation. When the user makes some changes, the form should automatically save after 1.5 seconds. And the save endpoint is set up to invalidate the query endpoint, so that a new fresh copy is retrieved whenever save finishes. But the user might still be making changes while save is happening, which results in lost changes once the new copy comes back due to the invalidation.
I'm wondering what the recommended approach is for this type of scenario?

Some thoughts:

1. Could remove the automatic invalidation of the query when the mutation happens, and trigger it manually at a later point instead. A bit risky perhaps, but possible.
2. Lock the form while the save happens. Not great UX.
3. Set "skip" to true when there are changes in the form. Tried a bit but didnt behave as expected. Seems setting skip to true always gave me undefined data from the query? Might have to read up more on that one, but abandoned the approach for now anyway.

Probably leaning towards option 1, but looking for some guidance here since it would obviously be better to leave the automatic invalidation in place.

Any thoughts on this? Perhaps there should be a recipe in the docs for this?

I found an npm package for a custom hook with React Query for this, with an option to merge the incoming data with the form data (if I read it correctly).
https://github.com/lukesmurray/react-query-autosync

[einarq]

@phryneas
Any thoughts on how this should or could be solved? Have you seen this discussed anywhere at all?

My current solution involves creating a custom hook that checks if changes were made, and then does manual invalidation once it unmounts, so that its no reloading while you are editing.

[einarq]

@markerikson
Any thoughts from you on this?

[markerikson]

Honestly no, sorry :)

[einarq]

Ok :)

Honestly a bit surprised this isn't more of an issue, both for RTKQ and for React Query.
Isnt auto-save quite common these days?

I guess the recommended form approach these days is to have a uncontrolled form, so that reloading the data in the background won't have the side-effect I'm looking to avoid?

On my suggested approach nr 3 above, I guess the behavior I was getting might have been because I used "data" instead of "currentData"? Or vice versa...

[markerikson]

I don't think I've seen any specific mentions of "auto-save + RTKQ" outside of this particular thread, and it's just not a topic I've spent any time thinking about.