React聊天应用中，使用useInfiniteQuery如何添加新数据且不重新请求

你的问题出在没有遵循不可变数据更新原则。React Query对缓存的变化检测依赖浅比较，你直接修改了pages[0]内部的属性，虽然外层newData是新对象，但pages数组里的第一个元素还是原引用，导致React Query认为数据没变化，所以UI不更新。

正确的更新方式 #

需要完全创建新的嵌套对象，确保每一层引用都更新：

const { mutate: mutateSendMessage } = useMutation({
  mutationFn: postMessage,
  onSuccess: (newMessage) => {
    queryClient.setQueryData(['messages', chatId], (existingMessages) => {
      if (!existingMessages) return existingMessages;

      // 复制pages数组，避免修改原数组引用
      const newPages = [...existingMessages.pages];
      // 复制第一个page对象，更新内部属性
      const updatedFirstPage = {
        ...newPages[0],
        results: [newMessage, ...newPages[0].results], // 用展开式创建新数组，替代unshift
        count: newPages[0].count + 1
      };
      // 替换pages数组的第一个元素
      newPages[0] = updatedFirstPage;

      // 返回完整的新数据结构
      return {
        ...existingMessages,
        pages: newPages
      };
    });
  }
});

关键改动说明 #

• 用[...existingMessages.pages]复制pages数组，创建新的数组引用
• 对第一个page对象做浅拷贝，同时用展开式[newMessage, ...results]创建新的results数组，替代会修改原数组的unshift
• 最后将更新后的page替换进新的pages数组，再返回新的顶层数据对象

这样每一层都是新的引用，React Query能检测到缓存变化，UI就会自动更新了。

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