Redux-Toolkit Query删除Schedule后缓存更新问题求助

解决方案 #

方案1：手动删除单个实例缓存 + 批量更新所有列表缓存 #

核心思路是：在删除操作的onQueryStarted中，直接移除getScheduleById对应的缓存条目，同时遍历所有getAllSchedules的缓存实例（不管分页/搜索参数）来更新列表，无需传递额外参数。

修改deleteSchedule的配置如下：

deleteSchedule: builder.mutation({
  query: (id) => ({
    url: `/schedules/${id}/`,
    method: 'DELETE',
  }),
  onQueryStarted: async (id, { dispatch, queryFulfilled, getState }) => {
    // 1. 移除getScheduleById的对应缓存，避免触发自动重取
    dispatch(
      scheduleApiSlice.util.removeQuerySubscription(
        'getScheduleById',
        id,
        getState()
      )
    );

    // 2. 获取所有getAllSchedules的缓存条目
    const allListQueries = scheduleApiSlice.util.selectInvalidatedBy(
      getState(),
      [{ type: 'Schedule' }]
    ).filter(query => query.endpointName === 'getAllSchedules');

    // 3. 批量更新每个列表缓存，移除已删除的Schedule
    const patchOperations = allListQueries.map(query => 
      dispatch(
        scheduleApiSlice.updateCachedData(
          'getAllSchedules',
          query.originalArgs,
          (draft) => {
            draft.schedules = draft.schedules.filter(s => s.id !== id);
            // 可选：更新分页统计数，保持数据一致性
            if (draft.pagination) draft.pagination.count -= 1;
          }
        )
      )
    );

    try {
      await queryFulfilled;
    } catch {
      // 删除失败时回滚所有缓存修改
      patchOperations.forEach(patch => patch.undo());
    }
  },
  // 移除原有的invalidatesTags，避免自动触发重取
  // invalidatesTags: (result, error, id) => [{ type: 'Schedule', id }],
}),

方案2：禁用getScheduleById的自动重取 #

如果业务场景中不需要getScheduleById在缓存失效时自动重取，可以修改其查询配置，关闭自动重取开关：

getScheduleById: builder.query({
  query: (id) => `/schedules/${id}/`,
  providesTags: (result, error, id) => [{ type: 'Schedule', id }],
  // 关闭所有自动重取触发条件
  refetchOnMountOrArgChange: false,
  refetchOnFocus: false,
  refetchOnReconnect: false,
}),

该方案简单直接，但会影响所有场景下的getScheduleById重取逻辑，仅适合无需自动刷新单个Schedule数据的业务场景。

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