RTK Query Middleware - Stop next action from making isError true under condition

[ckifer]

Hi

I'm trying to intercept common errors in my app for all endpoints such as Unauthorized, etc.

Using this approach in the docs I can.. kind of do that.

Is the below code acceptable? Mostly interested in modifying the actions status under certain conditions because I need isError not to be true in my components since this error has already been handled. See comments inline

export const rtkQueryGlobalErrorMiddleware: Middleware = (api: MiddlewareAPI) => (next) => (action) => {
  const actionType = action.type;
  // rejected action
  if (isRejectedWithValue(action)) {
    const hasKnownGlobalErrors = checkForKnownGlobalErrors(action.payload, api.dispatch);
    // has known global error and has dispatched some state that causes an error to be shown to the user
    if (hasKnownGlobalErrors) {
      // I don't want to call the next action because that causes a 'rejected' state
      // my more specific error handling will be triggered per-component and cause more than one error to be shown to the user for the same thing.
      // If I don't return anything, loading state will be indefinite.
      const actionTypeWithoutStatus = actionType.substring(0, actionType.lastIndexOf('/'));

      // RTK Query actions are of form `api/action/status` so modify the returned action status
      return next({ ...action, type: `${actionTypeWithoutStatus}/fulfilled` });
    }
  }

  return next(action);
};

Essentially I need a way to mark the intercepted errors as handled so my component code doesn't interpret them as not. Ideally my components would only check for specifics or I'd handle all network errors in the middleware but in lieu of that this... seems to work?

This may just be an incorrect approach all-together 😅.

Thanks!

[plausible-phry]

Is there a reason you don't handle this in the baseQuery?

[ckifer]

If I check for this in the base query the response gets cached and the check in base query never runs again.

So if I clear the error on component unmount (navigate away) and then navigate back, instead of the error showing again nothing will happen since the check is in the query and the query doesn't run again.

[phryneas]

But that would also be the case if you turn it into a fulfilled action? (And if it isn't the case, that's likely unexpected behaviour that might change at any point)

[ckifer]

The important part is that the middleware runs again in general, because I dispatch the error state in the middleware rather than the result of the fulfilled action. Whereas the base query doesn't run again at all.

But the direction of the conversation makes me think this is a generally incorrect thing to do, so rather than forcing it I think I have some refactoring to do - appreciate the responses!