RTK Query注入端点引发"Cannot access 'baseApi' before initialization"错误

错误根源 #

问题出在初始化顺序循环依赖：authApi依赖未完成初始化的baseApi，而AuthSlice又直接引用authApi的匹配器，同时Store配置又要加载baseApi，导致初始化阶段出现引用时序冲突。

正确配置方案 #

1. 独立创建基础baseApi（无业务端点） #

先单独初始化baseApi，确保它是最早完成初始化的模块：

// src/app/baseApi.js
import { createApi } from '@reduxjs/toolkit/query/react';
import { dynamicBaseQuery } from './dynamicBaseQuery'; // 你的自定义带语言注入的baseQuery

export const baseApi = createApi({
  reducerPath: 'baseApi',
  baseQuery: dynamicBaseQuery,
  endpoints: () => ({}), // 初始为空，后续通过injectEndpoints扩展
  tagTypes: ['Auth', 'Buildings'], // 提前声明所有业务模块需要的标签类型
});

2. 业务API模块仅注入端点，导出必要内容 #

每个业务API只做端点注入，不导出完整api实例，切断循环引用链条：

// src/features/auth/authApi.js
import { baseApi } from '../../app/baseApi';

const authApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({
        url: '/auth/login',
        method: 'POST',
        body: credentials,
      }),
    }),
  }),
  overrideExisting: false,
});

// 只导出组件和Slice需要的内容
export const { useLoginMutation } = authApi;
export const authEndpoints = authApi.endpoints;

// src/features/buildings/buildingsApi.js
import { baseApi } from '../../app/baseApi';

const buildingsApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getBuildings: builder.query({
      query: () => '/buildings',
    }),
  }),
  overrideExisting: false,
});

export const { useGetBuildingsQuery } = buildingsApi;
export const buildingsEndpoints = buildingsApi.endpoints;

3. Store仅配置baseApi的reducer和中间件 #

所有业务端点的reducer会自动合并到baseApi的reducer中，无需单独添加业务API的reducer：

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { baseApi } from './baseApi';
import authSlice from '../features/auth/authSlice';

export const store = configureStore({
  reducer: {
    [baseApi.reducerPath]: baseApi.reducer,
    auth: authSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(baseApi.middleware),
});

4. 在Slice中使用导出的endpoints而非完整api实例 #

从业务API模块导出的authEndpoints/buildingsEndpoints中获取匹配器，避免直接引用未完成初始化的api实例：

// src/features/auth/authSlice.js
import { createSlice } from '@reduxjs/toolkit';
import { authEndpoints } from './authApi';

const authSlice = createSlice({
  name: 'auth',
  initialState: { user: null, isAuthenticated: false },
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      authEndpoints.login.matchFulfilled,
      (state, action) => {
        state.user = action.payload.user;
        state.isAuthenticated = true;
      }
    );
  },
});

export default authSlice.reducer;

关键注意事项 #

• 业务API模块必须在Store初始化之后被导入（比如在组件中导入useLoginMutation），避免在Store初始化阶段触发端点注入。
• 如果使用React，可在App入口或路由组件中通过懒加载或直接导入业务API模块，确保端点被正确注入到baseApi中。

内容的提问来源于stack exchange，提问作者Berci