使用RTK Query POST请求获取数据时更新Redux状态遇类型错误

错误原因 #

updateQueryData 是RTK Query专门用来更新query端点缓存数据的工具，而你代码里的getUser是一个mutation端点。Mutation本身不会持久化缓存结果，类型系统无法找到对应getUser的query缓存条目，因此抛出类型不匹配的错误。

解决方案 #

根据你的业务场景，有两种推荐的处理方式：

方式一：将getUser改为query端点（推荐）

如果getUser的作用是获取数据，即使接口要求用POST方法，也完全可以用build.query定义端点——RTK Query的query支持任意HTTP请求方法。这样RTK Query会自动帮你缓存请求结果，也能正常使用updateQueryData。

修改后的代码：

export const apiSlice = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: app.apiHost,
  }),
  tagTypes: ["User"],
  endpoints: (build) => ({
    getUser: build.query({
      query: (body) => ({
        url: `/getuser`,
        method: "POST", // 依然保留POST方法
        body,
      }),
      providesTags: ["User"],
    }),
    updateUser: build.mutation({
      query: (updatedData) => ({
        url: `/updateUser`,
        method: "POST",
        body: updatedData,
      }),
      invalidatesTags: ["User"],
      // 如果需要手动更新getUser的缓存，这里可以正常调用updateQueryData
      async onQueryStarted(args, { dispatch, queryFulfilled }) {
        try {
          const { data } = await queryFulfilled;
          dispatch(
            apiSlice.util.updateQueryData('getUser', args.userId, (draft) => {
              Object.assign(draft, data);
            })
          );
        } catch (err) {
          console.log("error... ", err);
        }
      },
    }),
  }),
});

// 导出对应的hooks供组件使用
export const { useGetUserQuery, useUpdateUserMutation } = apiSlice;

方式二：手动用Redux Slice管理状态（仅当必须用mutation时）

如果因为业务限制必须把getUser定义为mutation，那么需要单独创建一个Redux Slice来管理用户状态，在mutation的onQueryStarted中dispatch slice的action来更新状态，而不是依赖RTK Query的缓存工具。

示例代码：

// 先创建一个单独的user状态slice
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: null, // 初始状态设为null或你需要的默认值
  reducers: {
    setUser: (state, action) => action.payload,
    updateUserState: (state, action) => {
      Object.assign(state, action.payload);
    },
  },
});

export const { setUser, updateUserState } = userSlice.actions;
export default userSlice.reducer;

// 然后在apiSlice的getUser mutation中使用
export const apiSlice = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: app.apiHost,
  }),
  tagTypes: ["User"],
  endpoints: (build) => ({
    getUser: build.mutation({
      query: (body) => ({
        url: `/getuser`,
        method: "POST",
        body,
      }),
      async onQueryStarted(args, { dispatch, queryFulfilled }) {
        try {
          const { data } = await queryFulfilled;
          // 用slice的action更新状态
          dispatch(setUser(data));
        } catch (err) {
          console.log("error... ", err);
        }
      },
    }),
    updateUser: build.mutation({
      query: () => ({
        url: `/updateUser`,
        method: "POST",
      }),
      invalidatesTags: ["User"],
    }),
  }),
});

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