How to actually override fetchBaseQuery

[Rodrigo-JM]

Hello, I want to extend fetchBaseQuery so that I have an automatic refresh of token when given an 401 (like seen on this guide: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#automatic-re-authorization-by-extending-fetchbasequery)

The problem is that I get a circular dependency error from webpack ("error - ReferenceError: Cannot access 'backendApi' before initialization"). The code is pretty straightforward, the only thing that stands out is that I am using injectEndpoints for splitting my code.

If anyone has any idea on how to actually implement the custom baseQuery please help

[phryneas]

The example in the docs does not call an api endpoint - you would need to share some code what you are doing here.

[Rodrigo-JM]

Adding code examples.

api/backend/index.tsx

const baseQuery = fetchBaseQuery({
  baseUrl: process.env.BACKEND_BASE_URL,
  prepareHeaders: (headers, { getState }) => {
    const token = (getState() as RootState).token?.token;
    // If we have a token set in state, let's assume that we should be passing it.
    if (token) {
      headers.set("authorization", Bearer ${token});
    }

    return headers;
  },
});

const baseQueryWithReauth: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  let result = await baseQuery(args, api, extraOptions);
  if (result.error && result.error.status === 401) {
    // try to get a new token
    const refreshResult = await baseQuery("/refreshToken", api, extraOptions);
    if (refreshResult.data) {
      // store the new token
      // api.dispatch(tokenReceived(refreshResult.data));
      // retry the initial query
      result = await baseQuery(args, api, extraOptions);
    } else {
      api.dispatch(signOut());
    }
  }
  return result;
};

export const backendApi = createApi({
  reducerPath: "backend",
  baseQuery: baseQueryWithReauth,
  // refetchOnMountOrArgChange: 30,
  tagTypes: ["projects", "webhooks"],
  endpoints: () => ({}),
});

export interface BackendError {
  data: {
    message: string;
  };
  status: number;
}
// Export hooks for usage in function components, which are
// auto-generated based on the defined endpoints

api/backend/users/index.ts

const userAuthEndpoints = backendApi.injectEndpoints({
  endpoints: (build) => ({
    login: build.mutation<AuthState & UserState, Credentials>({
      query(credentials) {
        return {
          url: "/sessions",
          method: "POST",
          body: credentials,
        };
      },
      invalidatesTags: ["projects"],
    }),
    signUp: build.mutation<void | BackendError, SignUpInfo>({
      query(body) {
        return {
          url: "/users",
          method: "POST",
          body: body,
        };
      },
    }),
  }),
  overrideExisting: true,
});

It gives me this error when importing on the users endpoints file

error - ReferenceError: Cannot access 'backendApi' before initialization
ReferenceError: Cannot access 'backendApi' before initialization
    at Module.backendApi (webpack-internal:///./store/apis/backend/index.ts:3:59)
    at eval (webpack-internal:///./store/apis/backend/users/index.ts:26:63)
    at Object../store/apis/backend/users/index.ts (/Users/rodrigomallmann/Workspace/blockforce/cryptum-frontend-v2/.next/server/pages/_app.js:82:1)
    at __webpack_require__ (/Users/rodrigomallmann/Workspace/blockforce/cryptum-frontend-v2/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./store/ducks/user.ts:9:77)
    at Object../store/ducks/user.ts (/Users/rodrigomallmann/Workspace/blockforce/cryptum-frontend-v2/.next/server/pages/_app.js:147:1)
    at __webpack_require__ (/Users/rodrigomallmann/Workspace/blockforce/cryptum-frontend-v2/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./store/apis/backend/index.ts:7:69)
    at Object../store/apis/backend/index.ts (/Users/rodrigomallmann/Workspace/blockforce/cryptum-frontend-v2/.next/server/pages/_app.js:62:1)
    at __webpack_require__ (/Users/rodrigomallmann/Workspace/blockforce/cryptum-frontend-v2/.next/server/webpack-runtime.js:33:42) {
  page: '/'
}

[Rodrigo-JM]

Ok, so I found out what was happening.

What happens is that when using the method extraReducers while adding any "matchers" that use a given api endpoint, if overriding the fetchBaseQuery, it is important to not dispatch any action imported from that slice.

Specifically, I was dispatching a signOut action when the token renewal request failed. This signOut action was dependent on the slice, while the slice was dependant on conclusion of the API's endpoints Injections. Working on a solution that dispatches an action not imported from anywhere else.....

[anth0ni3]

Was looking for something similar to this and found the solution here. Thanks!!!

[User6531]

@phryneas Hi, what do you think about this solution? Because I face the same issue. And I don't like that he uses just hardcoded string here as a type.

[phryneas]

@User6531 I don't think anything hinders you from using an action creator instead?
You can always move an action that creates a circle into a third file with createAction and have your slice listen on it with an extraReducer. But you should only do that if you even encounter a circle - in most cases, that can be optimized away by a good bundler.

[User6531]

@phryneas
Below, you can see an example of a problem that I face. So, here we have a cyclic dependency: when mainApi is being created, it uses baseQueryWithReauth, and baseQueryWithReauth uses setInternalToken action from globalSlice. globalSlice uses globalApi in extraReducers, and finally, when globalApi is being created, it uses mainApi.

As a result, I get an error: Cannot access 'mainApi' before initialization.
Did I explain it well?

// mainApi.ts

import { setInternalToken } from 'globalSlice';

const baseQuery = fetchBaseQuery({
  baseUrl,
});

const baseQueryWithReauth = async (args, api, extraOptions) => {
  let result = await baseQuery(args, api, extraOptions);
  if (result.error && result.error.status === 401) {
    // try to get a new token
    const refreshResult = await baseQuery("/refreshToken", api, extraOptions);
    if (refreshResult.data) {
      // store the new token
      api.dispatch(setInternalToken(refreshResult.data)); // ← setInternalToken action from globalSlice is used here
      // retry the initial query
      result = await baseQuery(args, api, extraOptions);
    } else {
      api.dispatch(signOut());
    }
  }
  return result;
};


const mainApi = createApi({
  baseQuery: baseQueryWithReauth,
  tagTypes: mainTagTypes,
  reducerPath: mainReducerPath,
  endpoints: () => ({}),
});

export default mainApi;

// globalSlice.ts

import globalApi from 'globalApi';

const globalSlice = createSlice({
  name: "globalSlice",
  initialState,
  reducers: {
    setInternalToken(state, { payload }: PayloadAction<string>) {
      state.internalToken = payload;
    },
  },

  extraReducers: (builder) => {
    builder.addMatcher(
      globalApi.endpoints.getInternalToken.matchFulfilled, // ← globalApi is used here
      (state, { payload }) => {
        state.internalToken = payload;
      },
    );
  },
});

export const {
  setShouldReauthenticate,
  setAppConfig, 
  setInternalToken  
} = globalSlice.actions;

// globalApi.ts

import mainApi from 'mainApi';

const globalApi = mainApi.injectEndpoints({ // ← mainApi is used here
  endpoints: (builder) => ({
    getAppConfig: getAppConfigEndpoint(builder),
    getInternalToken: getInternalTokenEndpoint(builder),
  }),
});

export default globalApi;

[User6531]

@phryneas
Thank you a lot; moving createAction into a third file and having the slice listen to it with an extraReducer is working. It is very helpful.

fyi: @anth0ni3 @dljm @Rodrigo-JM

// actions.ts
export const setInternalToken = createAction<string>("setInternalToken");


// globalSlice.ts
import { setInternalToken } from "actions";

extraReducers: (builder) => {
    builder.addCase(setInternalToken, (state, { payload }) => {
      state.internalToken = payload;
    });
},

// mainApi.ts
import { setInternalToken } from "actions";

const baseQueryWithReauth = async (args, api, extraOptions) => {
  let result = await baseQuery(args, api, extraOptions);
  if (result.error && result.error.status === 401) {
    // try to get a new token
    const refreshResult = await baseQuery("/refreshToken", api, extraOptions);
    if (refreshResult.data) {
      // store the new token
      api.dispatch(setInternalToken(refreshResult.data)); 
      // retry the initial query
      result = await baseQuery(args, api, extraOptions);
    } else {
      api.dispatch(signOut());
    }
  }
  return result;
};