RTK Query中updateQueryData回调未触发，缓存更新失败如何解决？

问题 #

使用RTK Query和mutation实现功能时，期望mutation执行成功后将响应结果合并到Query的响应缓存中，采用updateQueryData()方法操作，但缓存更新未生效——mutation执行成功后数据集无变化，回调中的console.log也未输出。Mutation和Query本身均可返回正确结果，Redux开发者工具中能看到查询缓存键getShowCase({"term": "term1", "id": 50})。查询结果已转换为对象，相关代码如下：

const showCase = useGetShowCase({term: props.terms, id: props.id} ?? skipToken)?.data || {};

const updateShowCase = (id, data) => {
        updateShowCaseMutation({id, data})
            .then((response) => {
                api.util.updateQueryData('getShowCase', {term: props.terms, id: props.id}, (draft) => ({
                    ...draft,
                    ...response.data || {},
                }));
            })
    }

const createApiQuery = (build, queryOptions) => build.query({
    transformResponse: (response, meta, arg) => toObject(response.data, queryOptions),
    ...queryOptions,
});

请问该如何修复缓存更新失败的问题？

修复方案 #

1. 确保updateQueryData参数与缓存键完全匹配 #

检查{term: props.terms, id: props.id}是否和Redux DevTools中显示的缓存键参数完全一致：

• 校验参数类型：比如id是数字还是字符串，需和缓存中存储的类型一致（示例中缓存键是数字50，要保证props.id不是字符串类型）
• 检查props.terms的值是否与缓存中的"term1"完全匹配，无大小写、空格等差异

2. 改用Immer的draft直接修改方式 #

RTK Query的updateQueryData基于Immer实现，回调函数需要直接修改draft对象，而非返回新对象。当前返回新对象的写法会导致Immer无法正确追踪修改：

api.util.updateQueryData('getShowCase', {term: props.terms, id: props.id}, (draft) => {
  // 直接修改draft，覆盖或合并属性
  Object.assign(draft, response.data || {});
});

3. 处理skipToken导致的缓存未初始化场景 #

如果{term: props.terms, id: props.id}最终是skipToken，对应的缓存条目不存在，updateQueryData会静默失败。需先判断查询是否被跳过：

const { data: showCase, isUninitialized } = useGetShowCase({term: props.terms, id: props.id} ?? skipToken);

const updateShowCase = (id, data) => {
  updateShowCaseMutation({id, data})
    .then((response) => {
      // 仅当缓存已初始化时执行更新
      if (!isUninitialized) {
        api.util.updateQueryData('getShowCase', {term: props.terms, id: props.id}, (draft) => {
          Object.assign(draft, response.data || {});
        });
      }
    })
}

4. 改用mutation内置的onSuccess回调更新缓存（推荐） #

不要在then中手动调用updateQueryData，而是在mutation定义时使用onSuccess回调，更贴合RTK Query的生命周期：

在API slice中定义mutation：

const api = createApi({
  // ...其他配置
  endpoints: (build) => ({
    updateShowCaseMutation: build.mutation({
      query: ({id, data}) => ({
        url: `/showcase/${id}`,
        method: 'PUT',
        body: data,
      }),
      onSuccess: (response, {id}, api) => {
        // 传入与查询匹配的参数，更新对应缓存
        api.util.updateQueryData('getShowCase', {term: props.terms, id}, (draft) => {
          Object.assign(draft, response.data || {});
        });
      },
    }),
    getShowCase: createApiQuery(build, {
      // ...你的查询配置
    }),
  }),
});

组件中直接调用mutation即可：

const updateShowCase = (id, data) => {
  updateShowCaseMutation({id, data});
}

5. 校验transformResponse的结构转换逻辑 #

确认toObject函数转换后的缓存对象结构，是否与response.data的结构匹配。如果缓存是嵌套对象，而response.data是扁平结构，需要针对性修改draft的嵌套属性，确保合并操作生效。

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