Pass an aditional parameter to RTK Query action payload

[filipkrayem]

Hi, is it possible to somehow pass additional parameters (functions in this case) to the action fired from RTK Query?

I want to be able to pass onSuccess and onError functions that are going to be handling errors. I know I can just put a try catch block inside the query and handle it there, but I'd like to move that logic to the middleware since it's cleaner and a better developer experience.

 currentUser: build.query<ApiResponse<User>, void>({
      query: () => ({
        url: USER_URL + "/current",
      }),

      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
        const fulfilled = await queryFulfilled;

        if (fulfilled.meta?.response?.ok) dispatch(setUser(fulfilled.data.data));
      },
    }),

export const apiErrorHandler: Middleware = (api: MiddlewareAPI) => (next) => (action) => {
  const { onSuccess, onError } = action;

  if (isFulfilled(action)) {
    if (onSuccess) onSuccess();
  }
  if (isRejectedWithValue(action)) {
    if (onError) onError();
    else store.dispatch(showNotification(action.payload.data.error.message, "error"));
  }

  return next(action);
};

[phryneas]

Honestly, this sounds like an antipattern in the making, working against your library instead of with it - and it might be the case that you are trying to solve a problem that usually should not even come up here. What are you actually trying to do?

[filipkrayem]

I want to be able to dispatch notifications on Error and Success in some actions.
Error notifications because sometimes API returns error messages mostly friendly for developers, not for end users. So I don't want to display the backend error message and display my message instead.

On success is basically the same thing.

[phryneas]

Hmm.

Generally: arg will land in an action, and actions should not contain non-serializable data if it can be avoided, I would really not want to put functions on there.

Two different ideas:

• wrap your baseQuery as for example shown in this example: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#automatic-re-authorization-by-extending-fetchbasequery

• listen for the fulfilled or rejected action in a middleware. You could for example use the pre-defined matchers for them: https://redux-toolkit.js.org/rtk-query/api/created-api/endpoints#matchers
  These actions will contain meta with the full Response object. (And yes, the irony that there is some non-serializable data in actions there is not completely lost on me, but I would avoid putting another layer on top.)

[filipkrayem]

Thank you very much, I'll look into it :)