Apollo单条mutation触发update四次问题排查求助

看起来你遇到的是React Query（结合你提到的mutation、乐观更新和update方法，大概率是这个库）里的典型问题，咱们一步步拆解原因和解决方案：

1. 先排查：是不是不小心触发了多次mutate调用 #

这是最常见的坑！先检查你调用mutate的地方：

• 有没有把mutate()放在组件顶层（不是useEffect或事件回调里）？组件每次渲染都会执行一遍，自然会重复调用；
• 事件绑定是不是重复了？比如onClick里写了两次mutate()，或者父组件重新渲染导致子组件重复触发；
• 有没有用useCallback包裹触发mutate的函数？没包裹的话，每次组件渲染都会生成新的函数，可能导致重复触发。

排查小技巧：在调用mutate的地方加个日志：

console.log('触发mutate啦！');
mutate(newEntry);

如果控制台打印了两次，那就是重复调用的问题，把mutate放在事件回调或useEffect里，用useCallback包裹触发函数就行。

2. 检查乐观更新的逻辑是否正确 #

React Query的乐观更新流程是：先更新缓存（乐观数据），请求成功后再用真实数据同步缓存。如果你的逻辑写错了，就会导致重复添加：

错误示例（会导致重复）： #

const mutation = useMutation(
  addNewEntry,
  {
    onMutate: async (newEntry) => {
      await queryClient.cancelQueries(['entries']);
      const oldEntries = queryClient.getQueryData(['entries']);
      // 乐观更新：直接push新条目
      queryClient.setQueryData(['entries'], [...oldEntries, newEntry]);
      return () => queryClient.setQueryData(['entries'], oldEntries);
    },
    onSuccess: (savedEntry) => {
      // 这里又push一次真实数据，等于加了两次！
      queryClient.setQueryData(['entries'], old => [...old, savedEntry]);
    }
  }
);

正确做法：替换乐观条目，而非重复添加 #

给乐观数据加个临时ID（比如tempId: Date.now()），请求成功后用真实数据替换掉乐观的那条：

const mutation = useMutation(
  addNewEntry,
  {
    onMutate: async (newEntry) => {
      await queryClient.cancelQueries(['entries']);
      const oldEntries = queryClient.getQueryData(['entries']);
      // 给乐观数据加临时ID
      const optimisticEntry = {...newEntry, tempId: Date.now()};
      queryClient.setQueryData(['entries'], [...oldEntries, optimisticEntry]);
      return {oldEntries, optimisticEntry};
    },
    onSuccess: (savedEntry, variables, context) => {
      // 用真实数据替换乐观条目
      queryClient.setQueryData(['entries'], oldEntries => 
        oldEntries.map(entry => 
          entry.tempId === context.optimisticEntry.tempId ? savedEntry : entry
        )
      );
    },
    onError: (err, variables, context) => {
      // 失败回滚
      queryClient.setQueryData(['entries'], context.oldEntries);
    }
  }
);

3. 检查update函数的逻辑 #

如果你用了mutation的update选项，或者在useQuery里的更新逻辑，要确保不会重复添加：

错误示例： #

update: (oldEntries, newEntry) => [...oldEntries, newEntry]

每次调用update都会push一次，调用四次自然会加多次。

正确做法：先判断是否已存在 #

update: (oldEntries, newEntry) => {
  // 用临时ID或真实ID判断是否已存在
  const isDuplicate = oldEntries.some(entry => 
    entry.tempId === newEntry.tempId || entry.id === newEntry.id
  );
  if (isDuplicate) {
    // 替换而非添加
    return oldEntries.map(entry => 
      entry.tempId === newEntry.tempId || entry.id === newEntry.id ? newEntry : entry
    );
  }
  return [...oldEntries, newEntry];
}

4. 检查React Query的配置 #

有没有开启retry（默认是3次）？如果请求失败重试，会重复触发乐观更新和update。可以临时把retry设为0试试：

const mutation = useMutation(addNewEntry, {
  retry: 0,
  // 其他配置
});

另外，refetchOnWindowFocus、refetchOnMount这类自动刷新配置也可能导致缓存重复更新，暂时关掉看看有没有改善。

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