Vite HMR场景下如何重载Redux Toolkit Query端点？

核心方案 #

利用Vite的HMR API动态控制injectEndpoints的overrideExisting参数，仅在HMR更新时允许覆盖已有端点：

// 初始化RTK Query API
const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    // 初始端点定义
  }),
});

// 判断当前是否处于Vite HMR更新流程中
const isViteHMRUpdating = import.meta.hot?.data?.isUpdating ?? false;

// 注入/重载端点时配置overrideExisting
const extendedApi = api.injectEndpoints({
  endpoints: (builder) => ({
    // 你的端点实现（比如需要热更新的接口逻辑）
    getPosts: builder.query({
      query: () => '/posts',
    }),
  }),
  overrideExisting: isViteHMRUpdating,
});

// 注册Vite HMR处理逻辑，标记更新状态
if (import.meta.hot) {
  import.meta.hot.accept();
  // 将更新状态存入HMR共享数据，供重载后的模块读取
  import.meta.hot.data.isUpdating = true;
}

export default extendedApi;

原理说明 #

Vite的HMR机制和Webpack不同，没有module.hot.status()这类API，但提供了import.meta.hot.data用于在模块更新前后共享状态：

1. 当模块被HMR触发重载时，通过import.meta.hot.accept()接受更新，并在共享数据中标记isUpdating为true；
2. 重载后的模块读取该标记，自动将overrideExisting设为true，既避免了端点覆盖警告，又能让RTK Query的端点变更生效，无需强制刷新页面。

简化备选方案 #

如果仅需在开发环境的HMR场景下允许覆盖，也可以直接通过环境变量判断（精度稍低，但能解决大部分场景）：

overrideExisting: import.meta.env.DEV && import.meta.hot

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