Lost Pessimistic Update Data After Query Completion

[yankinx]

I've encountered an issue related to the sequence of request execution involving a Query request and a mutation. If the execution time of the Query is longer than the mutation request's execution time, it leads to a scenario where:

The Query starts.
The mutation starts.
The mutation ends.
The Query ends.
As a result, the final response lacks the data I need, and updateQueryData doesn't execute as expected.

Here's the structure of my API:

 const ridesApi = createApi({
  baseQuery,
  endpoints: builder => ({
    getRides: builder.query({
      query: () => 'rides'
    }),
    postRidePrice: builder.mutation({
      query: id => ({
        url: 'rides/' + id,
        method: 'POST'
      }),
      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
        try {
          const { data } = await queryFulfilled;

          dispatch(
            ridesApi.util.updateQueryData('getRides', undefined, rides => {
              const ride = rides.find(ride => ride.id === data.id);

              if (ride) {
                Object.assign(ride, data);
              }
            })
          );
        } catch (e) {
          console.error(e);
        }
      }
    })
  })
});

Could you please suggest the best way to resolve this problem?

My current solution involves waiting for the Query request to complete before executing updateQueryData. However, waiting has its downsides, and I'm wondering if I might be approaching this incorrectly or if there's another way to update the cache more efficiently.

async onQueryStarted(arg, { dispatch, queryFulfilled }) {
        try {
          const { data } = await queryFulfilled;

          const res = dispatch(ridesApi.util.getRunningQueryThunk('getRides', undefined));

          if (res) {
            await res;
          }

          dispatch(
            ridesApi.util.updateQueryData('getRides', undefined, rides => {
              const ride = rides.find(ride => ride.id === data.id);

              if (ride) {
                Object.assign(ride, data);
              }
            })
          );
        } catch (e) {
          console.error(e);
        }
      }

Ideally, I would like to execute updateQueryData at the end of the mutation and then incorporate changes into the Query response upon its completion.

Additionally, I should clarify that optimistic updates are not an option for me; I require the response from the mutation.