如何检测mutation请求产生的新增列表项？React-Query实现方案

react-query是否内置新增项检测相关能力 #

没有。react-query的核心能力是服务端状态缓存、请求状态管理、自动重拉/重试，本身不提供业务层面的新旧数据集差异比对、新增条目标记能力，只会按照配置规则存储接口返回的原始数据，不会主动识别数据条目的新增/存量属性。

更简洁规范的实现方案 #

你最初考虑的localStorage存储全量历史返回做比对的方案存在明显缺陷：跨设备/跨账号登录时容易出现标记错乱、本地存储容量上限容易触发报错、手动维护全量数据存储容易产生脏数据，不推荐使用。可以根据业务场景选下面两种更轻量的实现：

• 基于react-query自有缓存做差比对（接入成本最低）
  不需要额外引入本地存储，直接利用react-query自身保存的上一次成功请求的缓存数据，和本次拉取的新数据做比对即可。可以直接在useQuery的select配置里完成标记逻辑，示例代码：

  const { data: todoList } = useQuery({
    queryKey: ['todoList'],
    queryFn: getToDoList,
    select: (newList, prevList) => {
      // 首次加载无历史数据，所有项默认不打新标记
      if (!prevList) return newList.map(item => ({ ...item, isNew: false }))
      // 用历史id建集合，把比对时间复杂度降到O(n)
      const prevIdSet = new Set(prevList.map(item => item.id))
      return newList.map(item => ({
        ...item,
        isNew: !prevIdSet.has(item.id)
      }))
    }
  })
  

  如果需要控制「新」标记的展示时长，可以在打标记时同时记录时间戳，渲染时判断标记是否超过预设有效期，过期就自动隐藏标记即可，不需要额外持久化全量列表数据。
• 新增操作时主动记录新条目id（准确率最高）
  如果业务上只需要标记当前用户自己操作新增的待办项，不需要等列表refetch时被动比对：用户触发新增待办提交成功后，直接把返回的新待办id存在内存状态或者sessionStorage里，列表渲染时匹配到对应id就展示「新」标记，等用户浏览过该项、或者标记展示超过预设时长后，把对应id从记录里移除即可。
  这个方案不会把其他端/其他用户创建的待办误标记为新内容，逻辑更简单，标记准确率也更高。

注意：如果业务上的「新」标记需要跨会话、跨设备生效，最规范的实现是让后端接口在返回待办项时直接携带isNew/createTime字段，前端只做渲染逻辑，不需要自己维护历史数据做比对。

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