I'm trying to connect middleware via an API so I assume that when I get a 401 error from my endpoints I'll be able to see my console.log, but that's not happening. I don't even see "middleware activated" Where am I wrong? My ultimate goal is to catch the 401 error and refresh the token. My endpoints are connected via injectEndpoints in separate files.
My store:
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import userReducer from "./user/slice";
import modelsReducer from "./models/slice";
//API
import { bplexApi } from "../api_v2";
const store = configureStore({
reducer: {
user: userReducer,
models: modelsReducer,
//API
[bplexApi.reducerPath]: bplexApi.reducer,
},
middleware: (getDefaultMiddleware) => {
return getDefaultMiddleware().concat(bplexApi.middleware);
},
});
export default store;
My index.js:
export const bplexApi = createApi({
reducerPath: "bplexApi",
baseQuery: fetchBaseQuery({
baseUrl: "/api/v1",
prepareHeaders: (headers) => {
const token = getToken();
if (token) {
headers.set("Authorization", `Token ${token}`);
}
return headers;
},
}),
endpoints: () => ({}),
middleware: (getDefaultMiddleware) => {
console.log("middleware activated");
return getDefaultMiddleware().concat({
onError: async (error, dispatch, api) => {
console.log("aaaa");
const { status } = error;
if (status === 401) {
console.log("Error here");
throw error;
}
throw error;
},
});
},
});