[SOLVED] Intercepting middleware using RTK Query not working

Intercepting middleware using RTK Query not working

I am trying to add middleware to my apiSlice to console.log something on each and every request, however I do not see any logs (the whole thing works, I just don't see any logs).

apiSlice

const loggingMiddleware = (next) => async (args) => {
    console.log("Request is being made:", args); // not seeing this
    const result = await next(args);
    console.log("Response received:", result); // or this
    return result;
};

export const apiSlice = createApi({
    baseQuery,
    tagTypes: ["Products", "Pages"],
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(loggingMiddleware),
    endpoints: () => ({}),
});

Store.js

const store = configureStore({
    reducer: {
        [apiSlice.reducerPath]: apiSlice.reducer,
        auth: authSlice,
        header: headerSlice,
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(apiSlice.middleware),
    devTools: true,
});

Solution

You can add more middleware to your Redux store in the configureStore call, but createApi just has no middleware option.

That looks like something hallucinated by ChatCPT. When in doubt, please check the TypeScript types (your editor should highlight errors like this to you and also offer you all actually possible options when using TS), or look at the documentation.