awaited dispatched queries are returning status: pending

[pollen8]

Hi
I mentioned this in the discord channel and @phryneas was kind enough to talk me through how awaited dispatched rtkquery requests should be handled. He believed that what I was seeing shouldn't happen and asked me to create a code sandbox.

I've now done that and its available here - https://codesandbox.io/s/peaceful-tereshkova-rvumb

In the demo I'm using MSW to mock out all the data responses to clarify that it wasn't something funky with the actual API I consume.

I'm using xState to model loading and deleting data from an API:

The machine list.machine.ts starts off making a list request, then you can send 'DELETE_ITEM' event to ask the machine to transition to the delete state,at which it invokes the 'deleteListData' service, containing the rtkQuery api.endpoint call to delete a list item. At this point:

• In the console's network tab the mock service worker has returned a new response with that item deleted
• However, at the same time in the console you will see the awaited dispatch function return a status pending response, containing the stale data.
• I'm guessing some time after this the store's data is finally updated with the request data, because if you delete the same item again the new list request still reports as pending but now its stale data contains the results from the previous request.

This has me stumped! So any help greatly appreciated

If I update the machine to delay between transitioning between the delete and list states then things work as expected:

import { createModel } from "xstate/lib/model";
import { ModelContextFrom, ModelEventsFrom } from "xstate/lib/model.types";

import {
  Destination,
  ListDestinationsResponse
} from "../service/destinations-api.generated";

export const listModel = createModel(
  {
    data: [] as Destination[]
  },
  {
    events: {
      DELETE_ITEM: (id: string) => ({ id })
    }
  }
);

export const listMachine = listModel.createMachine({
  id: "list",
  initial: "loading",
  states: {
    loading: {
      invoke: {
        src: "fetchListData",
        onDone: {
          actions: assign({
            data: (
              context,
              event: DoneInvokeEvent<ListDestinationsResponse>
            ) => {
              console.log("assign ", event.data.destinations);
              return event.data.destinations ?? [];
            }
          }),
          target: "idle"
        },
        onError: {
          target: "error"
        }
      }
    },
    error: {},
    idle: {
      on: {
        DELETE_ITEM: {
          target: "delete"
        }
      }
    },
    pause: {
      after: {
        // after 0.1 second, transition to loading
        100: { target: "loading" }
      }
    },
    delete: {
      invoke: {
        src: "deleteListData",
        onDone: {
          target: "pause"
        }
      }
    }
  }
});

export type DestinationsListContext = ModelContextFrom<typeof listModel>;
export type DestinationsListEvent = ModelEventsFrom<typeof listModel>;
export type DestinationsListService = ActorRefFrom<typeof listMachine>;

[rsquared24]

Any idea how we can solve this? Im in a similar scenario where im trying to reuse the actions by combining them into another endpoint

ApiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getJob: builder.query<Job | undefined, GetJobParams>({
      queryFn: async (params, _queryApi, _extraOptions, fetchWithBaseQuery): Promise<any> => {

        const taskQuery = await _queryApi.dispatch(getProjectTask.initiate(params}));
        const quoteRequestQuery = await _queryApi.dispatch(getTaskQuoteRequest.initiate(params));
        const companyTaskQuoteListQuery = await _queryApi.dispatch(getCompanyTaskQuoteList.initiate({ companyId: params.companyId }));
        
        // On initial run, this waits correctly and has a status of fulfilled for all 3 queries.
        // When this query gets rerun due to the tag being invalidated, the statuses for the 3 queries are "pending" and returns stale data (it eventually updates, in the state)      
        console.log({ t: taskQuery, qr: quoteRequestQuery, ctql: companyTaskQuoteListQuery });

        const model = transformJob.toModel(taskQuery.data, quoteRequestQuery.data, companyTaskQuoteListQuery.data);
        return { data: model }
      },
      providesTags: [
        "Task",
        "TaskQuote",
        "TaskQuoteRequest"
      ]
    }),
  }),
})

Basically what is happening is I am calling getJob.useQuery({...}) which loads everything fine (first console.log). Then when I do a mutation which invalidates Task TaskQuote TaskQuoteRequest it reruns the getJob but does not stop at the await which leaves the requests in pending (second console.log). It eventually resolves, but at that point the data is stale

[antoniosZ]

It may sound weird but try adding the autoBatchEnhancer in your store, as in the example:

https://redux-toolkit.js.org/api/autoBatchEnhancer

enhancers: (existingEnhancers) => {
    // Add the autobatch enhancer to the store setup
    return existingEnhancers.concat(autoBatchEnhancer())
  },

If you read the docs, it says:

RTK Query already marks several of its key internal action types as batchable.

In my case, even though I did not mark my queries explicitly as batchable or set the SHOULD_AUTOBATCH, etc. they acted "weird" at times and left my query promises pending, just like what you describe...

[phryneas]

@antoniosZ The autoBatchEnhancer does not interact with the timing of thunks like that at all, it just potentially delays the next call of store.subscribe, which would potentially delay the next React rerender.

From that perspective, what you are experiencing sounds very curious - could you try to create a reproduction?

[antoniosZ]

@phryneas , please note that I am using it in web components with store.dispatch of the initiate api query method, which returns the promise. That Promise, resolves to pending state without the autoBatchEnhancer for all the simultaneous queries, except for the very first one.

I wish I had the time to reproduce. Maybe in the future I can put some time in a minimal repro. Sorry.

[markerikson]

@antoniosZ : could you record a Replay and share that with us ( https://replay.io/record-bugs )? That would be the most helpful thing that would let us investigate.

[antoniosZ]

I am sorry @markerikson but I can't provide a recording at this time. I will try to provide a minimal repro in the future

[antoniosZ]

@markerikson, as far as I am concerned, this issue has been in a way "resolved" with version v2.0.0
since the autoBatchEnhancer has being added by default in the configureStore...
https://redux-toolkit.js.org/usage/migrating-rtk-2#configurestore-adds-autobatchenhancer-by-default

At this point, I am not even going to try to deviate from the default configuration, since it works.