Prevent old mutation response to overwrite new state (optimistic updates)

[gatezh]

Let's say I have a select input.
A user expects that UI reflects one's choice immediately.
I've implemented an optimistic update approach: update the local state with a user's choice and send a request.

A request takes some time to fulfill. In the situation when a user decides to change the input immediately after the previous choice two requests are being sent. When the first response arrives it overwrites the state with the previous choice, when the second response arrives it overwrites the state with the second choice.

How to prevent such behavior, so that only the most recent mutation response updates the state?

[phryneas]

Since a mutation response will never override a query state, I'm a bit at a loss. Can you give a more explicit example?

[gatezh]

Hey @phryneas,
I must have used queryFulfilled within onQueryStarted in a wrong way.

Here's how I used it:

async onQueryStarted( { policy }, { getState, queryFulfilled } ) {
  const state = getState();
  const previousPolicy = state.api.data.policy;
  // Optimistically update policy after selecting it
  state.api.data.policy = newPolicy;
  queryFulfilled
    .then(({ data }) => {
      // Update policy when request is finished
      state.api.data.policy = data.policy;
    })
    .catch(error => {
      // Revert state changes if request failed
      state.api.data.policy = previousPolicy;
    });

And here's how I was supposed to use it:

async onQueryStarted( { policy }, { getState, queryFulfilled } ) {
  const state = getState();
  const previousPolicy = state.api.data.policy;
  // Optimistically update policy after selecting it
  state.api.data.policy = newPolicy;
  try {
    await queryFulfilled;
  } catch (error) {
    // Revert state changes if request failed
    state.api.data.policy = previousPolicy;
}};

Thank you for your response :)

[phryneas]

state.api.data.policy = newPolicy;

is not an optimistic update, but a mutation of Redux state outside of a reducer, or in other words: a bug waiting to happen, as this will never cause your UI to update.

If you want to do optimistic updates, please always use updateQueryData as shown in the manual cache updates documentation page.

[gatezh]

Thank you for pointing that out!

With that I have one more question.
Is it okay to import an action from an existing duck file and use it within onQueryStarted?

import { actions } from 'state/api/data';

...

async onQueryStarted( { policy }, { dispatch, queryFulfilled } ) {
  // Optimistically update policy after selecting it
  const patchResult = dispatch(actions.updatePolicy(newPolicy));
  try {
    await queryFulfilled;
  } catch (error) {
    // Revert state changes if request failed
    patchResult.undo();
}};

The .undo() does not seem to be working in this case.

We are trying to migrate to Redux Toolkit + RTK Query, but it doesn't happen in one go unfortunately...

[markerikson]

Yeah, there is no patchResult or .undo() there - those are specific to the "update cache entry" functionality, and don't work on arbitrary actions.

Not immediately sure what the best way to handle this would be.

[gatezh]

I ended up with the following version:

import { actions } from 'state/api/data';

...

async onQueryStarted( { policy: newPolicy }, { getState, dispatch, queryFulfilled } ) {
  const previousPolicy = state.api.data.policy;
  // Optimistically update policy after selecting it
  dispatch(actions.updatePolicy(newPolicy));
  try {
    await queryFulfilled;
  } catch (error) {
    // Revert state changes if request failed
    dispatch(actions.updatePolicy(previousPolicy));
}};

Works as expected.
Thanks @phryneas, and @markerikson for helpful tips! Appreciated!