使用RTK Query对接多个base URL的正确实现方式是什么？

方案可行性结论 #

你当前的实现思路是完全可行的，将关联的query和mutation统一放到同一个createApi实例中管理是该场景的最优选择。

原因说明 #

• 拆分多个createApi实例的话，不同实例的缓存标签、内部状态完全隔离，无法跨实例触发缓存失效，你的判断完全正确。
• 你用queryFn自定义请求逻辑的写法可以正常运行，但还有更简化的实现方式：不需要手动封装fetch调用，直接在mutation的query配置项里写完整接口地址，就能覆盖全局定义的baseUrl，也能正常使用RTK Query的所有内置能力。

优化后的代码示例 #

export const customerApi = createApi({
  // reducerPath需要是全局唯一的字符串，不可使用/../这类非法路径格式
  reducerPath: "customerApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://www.domain-customer.com/" }),
  // 声明用到的缓存标签类型
  tagTypes: ["Customer"],
  endpoints: (builder) => ({
    getCustomerExample: builder.query({ 
      query: (name) => `customer/${name}`,
      providesTags: (result, error, name) => [{ type: "Customer", id: name }]
    }),
    updateCustomer: builder.mutation({
      query: (updateParams) => ({
        // 直接写完整接口地址即可覆盖全局baseUrl
        url: "https://www.domain-order.com/updateCustomer",
        method: "POST",
        body: updateParams
      }),
      // 定义失效标签，执行后自动触发对应query重新拉取数据
      invalidatesTags: (result, error, updateParams) => [{ type: "Customer", id: updateParams.name }]
    })
  })
});

补充建议 #

• 只有完全独立、没有任何缓存关联的业务模块，才建议拆分不同的createApi实例，同业务域的接口都放在同一个实例中才能最大化利用RTK Query的缓存、自动重取等能力。
• 如果跨域接口数量较多，可以封装动态baseQuery工具函数，根据请求参数自动切换域名，减少重复配置。

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