Question 173736 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Catch a RTK Query fulfilled action in redux toolkit middleware

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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);
};

  2. 0

    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
        }
      },
    }),
  }),
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search