如何在RTK Query中实现跨API标签失效，触发关联查询重获取

我将API拆分为CartApi与ShoppingApi两个模块，基于baseApi进行扩展配置。当调用CartApi中的updateCart端点（已配置invalidatesTags: ["Shopping"]）时，ShoppingApi中提供"Shopping"标签的getShoppingSession端点并未自动重获取数据，需要解决该问题。

解决方案 #

1. 修正updateCart的invalidatesTags配置位置 #

原代码中将invalidatesTags写在了query对象内部，这是错误的。RTK Query要求mutation的invalidatesTags必须配置在mutation的顶层选项中，与query同级。

2. 清理Store中的冗余配置 #

CartApi和ShoppingApi是通过injectEndpoints注入到baseApi中的，它们的reducer和middleware已经合并到baseApi里，无需单独添加到Store中，否则会导致缓存机制冲突。

修改后的代码 #

调整后的CartApi #

import { baseApi } from "../BaseApi/baseApi";
type CartItemType = {
  product_id?: string;
  quantity?: number;
};
type CartType = {
  _id: string;
} & CartItemType;
type CartResponse = {
  message: string;
  data: CartType;
};

export const cartApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getCartByProDuctId: builder.query<CartResponse, string>({
      query: (id: string) => `cart-item/${id}`,
      providesTags: ["Cart"],
    }),
    createCart: builder.mutation<CartResponse, CartItemType>({
      query: (data: CartItemType) => ({
        url: "/cart-item/create",
        method: "PUT",
        body: data,
      }),
    }),
    updateCart: builder.mutation<CartResponse, CartItemType>({
      query: (data: CartItemType) => ({
        url: "/cart-item/update",
        method: "PATCH",
        body: data,
      }),
      // 将invalidatesTags移至mutation顶层配置
      invalidatesTags: ["Shopping"],
    }),
    deleteCart: builder.mutation<CartResponse, CartItemType>({
      query: (data: CartItemType) => ({
        url: "/cart-item/delete",
        method: "DELETE",
        body: data,
      }),
    }),
  }),
});
export const {
  useGetCartByProDuctIdQuery,
  useCreateCartMutation,
  useUpdateCartMutation,
  useDeleteCartMutation,
} = cartApi;

调整后的Store配置 #

import { configureStore } from "@reduxjs/toolkit";
import AuthReducer from "../api/AuthReducer/AuthReduce";
import { AuthMiddleware } from "../middleware/AuthMiddleware";
import { combineReducers } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/dist/query";
import { userApi } from "../api/UserApi/UserApi";
import { productApi } from "../api/ProductReducer/ProductApi";
import { paymentUserApi } from "../api/UserApi/UserPaymentApi";
import { baseApi } from "../api/BaseApi/baseApi";
import { ErrorLogger } from "../middleware/ErrorLogger";
const rootReducer = combineReducers({
  auth: AuthReducer,
  [userApi.reducerPath]: userApi.reducer,
  [productApi.reducerPath]: productApi.reducer,
  [paymentUserApi.reducerPath]: paymentUserApi.reducer,
  // 仅保留baseApi的reducer，注入的API已合并到baseApi中
  [baseApi.reducerPath]: baseApi.reducer,
});
export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => [
    ...getDefaultMiddleware(),
    userApi.middleware,
    productApi.middleware,
    paymentUserApi.middleware,
    // 仅保留baseApi的middleware，注入的API的middleware已包含在内
    baseApi.middleware,
    AuthMiddleware,
    ErrorLogger,
  ],
});
setupListeners(store.dispatch);
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;

问题原因说明 #

• invalidatesTags位置错误：RTK Query无法识别写在query对象内的invalidatesTags配置，必须将其放在mutation的顶层选项中，才能触发对应标签的查询刷新。
• 冗余的reducer和middleware：通过injectEndpoints扩展的API，其reducer和middleware会自动合并到baseApi中，重复添加会导致缓存系统出现多个实例，标签失效机制无法正常工作。

内容的提问来源于stack exchange，提问作者VN-Boy