Redux Toolkit Query中updateQueryData()与patchQueryData()的区别

这是RTK Query提供的缓存局部更新工具，核心用途是对已缓存的接口返回值做增量修改，底层内置Immer支持，同时自带乐观更新的回滚能力，大幅简化手动更新缓存的代码量。

• 回调逻辑要求不同
  调用updateQueryData时，你要么直接修改传入的draft对象，要么手动return一个完整的新缓存值作为替换；如果既修改draft又return值，return的结果会直接覆盖draft的修改，很容易写出不符合预期的代码。
  调用patchQueryData时，你不需要返回任何值，只需要在回调函数里直接修改draft的对应字段即可，所有修改会被自动记录。
• 回滚成本不同
  用updateQueryData做乐观更新时，你需要在修改前手动保存旧的缓存值，一旦后续接口请求失败，再手动调用更新方法把旧值写回缓存，整套回滚逻辑需要自己实现。
  patchQueryData调用后会直接返回一个undo函数，请求失败时只要调用这个函数，就能一键把缓存恢复到修改前的状态，完全不需要自己维护旧值副本。
• 适用场景不同
  如果需要全量替换某条缓存的完整内容（比如重新拉取了全量列表要覆盖原有缓存），用updateQueryData更直接。
  如果只需要修改缓存的局部内容（比如修改列表中某一项的单个字段、新增/删除列表项），或是要实现乐观更新，patchQueryData的写法更简洁，出错概率更低。

// 以文章更新的乐观更新场景为例
const [updatePost] = useUpdatePostMutation()

const submitPostEdit = async (postId, formValues) => {
  // 先更新本地缓存，同时拿到回滚方法
  const rollback = api.util.patchQueryData('getPostDetail', postId, (draft) => {
    // 直接修改需要更新的字段即可，无需返回值
    draft.title = formValues.title
    draft.content = formValues.content
  })

  try {
    await updatePost({ id: postId, ...formValues }).unwrap()
  } catch (error) {
    // 请求失败直接回滚缓存
    rollback()
  }
}

内容的提问来源于stack exchange，提问作者Chong Lip Phang