如何使用RTK Query的upsertQueryData向缓存新增条目而非覆盖？

问题出在upsertQueryData的使用逻辑上：你直接将单个站点对象作为第三个参数传入，这会直接覆盖getSites查询缓存的全部数据。正确做法是通过第三个参数的回调函数，基于现有缓存数据进行修改。

修改onQueryStarted中的代码：

async onQueryStarted({}, { dispatch, queryFulfilled }) {
  const { data } = await queryFulfilled;
  const newSiteEntry = data.createSite.site;
  // getSites查询无参数，第二个参数传空对象以匹配原有缓存
  dispatch(
    sites.util.upsertQueryData('getSites', {}, (draft) => {
      // 通过Immer直接修改draft数组，添加新站点
      draft.push(newSiteEntry);
    })
  );
}

需要注意两个关键细节：

• getSites查询没有接收参数，因此upsertQueryData的第二个参数必须传空对象，这样才能匹配到原有的sites集合缓存。你之前传入的{ newSiteEntry.id }是错误的，这会创建一个新的缓存条目而非更新原有集合。
• 当upsertQueryData的第三个参数为函数时，RTK Query会通过Immer允许你直接修改draft状态，就像在Redux Toolkit的slice中操作状态一样，直接push新站点即可完成新增。

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