Catch a RTK Query fulfilled action in redux toolkit middleware

Question

I want to fire some side-effects after one of my RTKQ queries completes. I decided the best way would be to do it inside a middleware but I'm not sure what is the correct way to get catch this action.

After some debugging, I end up with something like below but it looks a bit hackish to me.

const recreateTransferOnAppStartMiddleware: Middleware<unknown, RootState> = 
  storeApi => next => action => {
    const isFulfilledAction = action.type === `api/executeQuery/fulfilled`;
    const isGetUserAction = action.meta
      && action.meta.arg
      && action.meta.arg.endpointName === `getUser`;

    if (isFulfilledAction && isGetUserAction)
      recreateTransfers(storeApi);

    return next(action);
};

My biggest problem with this code is that it is string based when checking for endpointName and action.type.

Answer 1

After some digging, I found it is possible to access an endpoint matcher directly:

const recreateTransferOnAppStartMiddleware: Middleware<unknown, RootState> = storeApi => next => action => {
    const isGetUserFulfilled = userApiSlice.endpoints.getUser.matchFulfilled(action);

    if (isGetUserFulfilled)
        recreateTransfers(storeApi);

    return next(action);
};

Answer 2

The endpoint's onQueryStarted property might be of better use for you here. You can run some additional logic when the query starts, or when it settles, i.e. when it completes.

Here's an example:

const api = createApi({
  baseQuery: ....,
  endpoints: (build) => ({
    getUser: build.query<...., ....>({
      query: ....,
      async onQueryStarted(_, { queryFulfilled }) {
        // `onStart` side-effect
        // anything you want to run when the query starts

        try {
          const { data } = await queryFulfilled
          // `onSuccess` side-effect
          // anything you want to run when the query succeeds
        } catch (err) {
          // `onError` side-effect
          // anything you want to run when the query fails
        }
      },
    }),
  }),
})