如何为通过injectEndpoints注入的特定RTK Query端点组动态修改baseURL

方案1：基于端点元数据(meta)的全局baseQuery动态替换（推荐） #

该方案改动最小，不需要修改现有端点的query路径定义，仅需增加少量标记即可实现需求。

步骤1：改造全局baseQuery逻辑 #

修改你创建emptyApi的文件，包装原生baseQuery实现动态替换逻辑：

import { fetchBaseQuery, createApi } from '@reduxjs/toolkit/query/react';

// 定义资源和对应本地环境变量的映射关系
const RESOURCE_ENV_MAP = {
  resource1: process.env.REACT_APP_RESOURCE1_LOCAL_URL,
  resource2: process.env.REACT_APP_RESOURCE2_LOCAL_URL,
  resource3: process.env.REACT_APP_RESOURCE3_LOCAL_URL,
  resource4: process.env.REACT_APP_RESOURCE4_LOCAL_URL,
};

const defaultBaseQuery = fetchBaseQuery({
  baseUrl: `${process.env.REACT_APP_API_HOST}`,
});

// 包装后的动态baseQuery
const dynamicBaseQuery = async (args, api, extraOptions) => {
  // 读取端点配置的资源类型标记
  const resourceType = api.endpointDefinition?.meta?.resourceType;
  // 仅当对应资源配置了本地URL时才替换baseUrl
  if (resourceType && RESOURCE_ENV_MAP[resourceType]) {
    if (typeof args === 'string') {
      args = `${RESOURCE_ENV_MAP[resourceType]}${args}`;
    } else {
      args.url = `${RESOURCE_ENV_MAP[resourceType]}${args.url}`;
    }
  }
  return defaultBaseQuery(args, api, extraOptions);
};

export const emptyApi = createApi({
  baseQuery: dynamicBaseQuery,
  endpoints: () => ({})
});

步骤2：给每个资源的端点增加资源类型标记 #

在你注入端点的文件里，给每个端点加meta字段标记所属资源：

// resource1的端点定义示例
const resource1Api = emptyApi.injectEndpoints({
  endpoints: (builder) => ({
    getData: builder.query({
      query: () => '/resource1/data',
      // 标记当前端点属于resource1
      meta: { resourceType: 'resource1' }
    })
  }),
  overrideExisting: false
});

// 其他资源的端点同理，修改meta里的resourceType即可

生产环境下只要不配置对应资源的本地环境变量，所有端点会自动走全局默认baseUrl，完全符合你的使用场景。

方案2：直接在端点定义中判断环境变量（更灵活） #

如果不想修改全局baseQuery，也可以直接在每个资源的端点里直接判断本地环境变量：
首先抽离资源baseUrl配置：

// 单独的api配置文件
export const RESOURCE_BASE_URL = {
  resource1: process.env.REACT_APP_RESOURCE1_LOCAL_URL || process.env.REACT_APP_API_HOST,
  resource2: process.env.REACT_APP_RESOURCE2_LOCAL_URL || process.env.REACT_APP_API_HOST,
  // 其他资源同理
}

然后在注入端点时直接使用配置：

import { RESOURCE_BASE_URL } from '@/config/api';

const resource1Api = emptyApi.injectEndpoints({
  endpoints: (builder) => ({
    getData: builder.query({
      query: () => `${RESOURCE_BASE_URL.resource1}/resource1/data`
    })
  }),
  overrideExisting: false
});

该方案逻辑直观不需要修改全局配置，缺点是每个端点的query都需要手动拼接前缀，适合端点数量较少的场景。

注意事项 #

• 如果你使用的是create-react-app，自定义环境变量必须以REACT_APP_开头才能被正确识别
• 如果本地服务的URL已经包含资源路径前缀（比如localURL1为http://localhost:3002/resource2），拼接路径时需要注意避免重复添加资源前缀

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