Redux-Toolkit中updateQueryData无法触发的问题排查求助

问题描述 #

在Redux-Toolkit API的mutation中调用updateQueryData()时，该方法始终无法触发回调函数——外部打印args内容正常，但updateQueryData内部的console.log('draft', draft)没有任何输出。

API代码 #

export const additionalInputsApi = createApi({
  reducerPath: 'additionalInputsApi',
  baseQuery: getBaseQuery(),
  keepUnusedDataFor: 90,
  endpoints: builder => ({
    getAdditionalInputData: builder.query({
      query: ({ scenarioType, sectorType, ccaVersion, companyId }) => ({
        url: endpoints.GET_ADDITIONAL_INPUT,
        params: {
          ccaVersion,
          scenarioType,
          sectorType,
          ...(companyId && { companyId })
        }
      }),
    }),
    updateAdditionalInputs: builder.mutation({
      query: data => utils.serviceLayerAPI.reduxPost(endpoints.SAVE_ADDITIONAL_INPUTS, data),
      async onQueryStarted(args, { dispatch, queryFulfilled }) {
        try {
          const { data: updatedPost } = await queryFulfilled
          dispatch(
            additionalInputsApi.util.updateQueryData('getAdditionalInputData', args.key, (draft) => {
              console.log('draft', draft); // Not printing anything
            })
          )
        } catch { }
      },
    })
  })
});

export const {
  useGetAdditionalInputDataQuery,
  useUpdateAdditionalInputsMutation,
} = additionalInputsApi;

Store配置代码 #

const sagaMiddleware = createSagaMiddleware();

const middlewares = [
  sagaMiddleware,
  additionalInputsApi.middleware
];

const store = configureStore({
  reducer: {
    additionalInputs: additionalInputsReducer,
    [additionalInputsApi.reducerPath]: additionalInputsApi.reducer
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware({
    serializableCheck: false
  }).concat(middlewares)
});

globalStore.RegisterStore('cca', store);

export default store;
export type RootState = ReturnType<typeof store.getState>;

问题原因及修复方案 #

1. 缓存键不匹配（最可能原因） #

updateQueryData的第二个参数是查询的缓存键，必须和调用useGetAdditionalInputDataQuery时传入的参数完全一致（包括结构、字段名、值）。你当前使用的args.key如果并非和查询参数（{scenarioType, sectorType, ccaVersion, companyId}）完全相同的对象，RTK Query就找不到对应的缓存条目，回调自然不会执行。

修复：确保传入updateQueryData的缓存键与查询参数完全匹配：

async onQueryStarted(args, { dispatch, queryFulfilled }) {
  try {
    const { data: updatedPost } = await queryFulfilled
    // 假设args中包含查询所需的所有参数
    const queryParams = {
      scenarioType: args.scenarioType,
      sectorType: args.sectorType,
      ccaVersion: args.ccaVersion,
      companyId: args.companyId
    };
    dispatch(
      additionalInputsApi.util.updateQueryData('getAdditionalInputData', queryParams, (draft) => {
        console.log('draft', draft);
        // 执行数据更新逻辑，比如合并新数据
        Object.assign(draft, updatedPost);
      })
    )
  } catch (e) {
    console.error('Update error:', e);
  }
}

2. 查询缓存不存在 #

如果getAdditionalInputData的查询从未被执行过（比如对应组件没调用useGetAdditionalInputDataQuery），或者缓存已过期（即使keepUnusedDataFor设为90，组件卸载后超过90秒缓存会被清理），updateQueryData找不到目标缓存，回调不会触发。

验证：在调用updateQueryData前检查缓存是否存在：

// 在onQueryStarted中添加
const cacheStatus = additionalInputsApi.endpoints.getAdditionalInputData.select(queryParams)(store.getState());
console.log('Cache status:', cacheStatus); // 查看是否有data或是否为fulfilled状态

3. 空catch块吞掉异常 #

你的catch块是空的，updateQueryData本身可能抛出错误（比如缓存键错误），但被吞掉后无法排查。

修复：在catch块中添加错误日志：

catch (e) {
  console.error('updateQueryData执行出错:', e);
}

4. 确认Middleware配置 #

虽然你的store已经添加了additionalInputsApi.middleware，但要确保它被正确注入。可以检查store的middleware列表，确认RTK Query的middleware存在。

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