初始获取聊天时处理实时Socket事件，避免缓存覆盖问题

方案1：函数式setQueryData合并数据，避免覆盖 #

在Socket收到新聊天时，不要直接替换缓存，而是用函数式方式获取当前缓存并合并新数据。不管useQuery是否在初始拉取，这种方式都能保证新消息不会被后续的请求结果覆盖——当初始请求完成后，React Query会自动触发缓存更新，合并逻辑会把新消息和请求返回的列表整合到一起。

示例代码：

// SocketContext.js 中处理新消息的逻辑
import { queryClient } from './queryClient';

function handleNewChat(newChat) {
  queryClient.setQueryData(['chatList'], (oldData) => {
    // 旧数据存在时，合并新聊天并去重
    if (oldData) {
      const exists = oldData.some(chat => chat.id === newChat.id);
      return exists ? oldData : [newChat, ...oldData];
    }
    // 旧数据不存在（初始拉取未完成），先存临时数组
    return [newChat];
  });
}

方案2：用useIsFetching监听拉取状态，延迟合并Socket消息 #

用React Query的useIsFetching钩子监听特定查询的拉取状态，把Socket收到的新消息暂存到组件状态，等拉取完成后再合并到缓存。这种方式比手动维护队列更简洁，状态判断更可靠。

示例代码：

// 聊天组件中
import { useIsFetching, useQueryClient } from '@tanstack/react-query';
import { useState, useEffect } from 'react';

function ChatComponent() {
  const queryClient = useQueryClient();
  const isFetching = useIsFetching(['chatList']);
  const [pendingChats, setPendingChats] = useState([]);

  // 处理Socket新消息
  useEffect(() => {
    const unsubscribe = socket.on('newChat', (newChat) => {
      if (isFetching) {
        // 正在拉取，暂存消息
        setPendingChats(prev => [...prev, newChat]);
      } else {
        // 拉取完成，直接合并缓存
        queryClient.setQueryData(['chatList'], (oldData) => {
          const exists = oldData?.some(chat => chat.id === newChat.id);
          return exists ? oldData : [newChat, ...oldData];
        });
      }
    });
    return unsubscribe;
  }, [isFetching, queryClient]);

  // 拉取完成后合并暂存消息
  useEffect(() => {
    if (!isFetching && pendingChats.length > 0) {
      queryClient.setQueryData(['chatList'], (oldData) => {
        // 合并去重
        const combined = [...pendingChats, ...(oldData || [])];
        return Array.from(new Map(combined.map(chat => [chat.id, chat])).values());
      });
      setPendingChats([]);
    }
  }, [isFetching, pendingChats, queryClient]);

  // 正常拉取聊天列表
  const { data: chatList } = useQuery({
    queryKey: ['chatList'],
    queryFn: fetchChatList,
  });

  return <div>{/* 渲染聊天列表 */}</div>;
}

方案3：用initialData预热缓存 #

如果Socket连接在useQuery发起请求前已建立，可提前收集Socket消息作为initialData传给useQuery。初始拉取完成后，通过select函数自定义合并逻辑，整合预热数据和请求结果。

示例代码：

// 聊天组件中
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useState, useEffect } from 'react';

function ChatComponent() {
  const queryClient = useQueryClient();
  const [initialChats, setInitialChats] = useState([]);

  useEffect(() => {
    const unsubscribe = socket.on('newChat', (newChat) => {
      // 收集初始拉取前的新消息
      setInitialChats(prev => {
        const exists = prev.some(chat => chat.id === newChat.id);
        return exists ? prev : [newChat, ...prev];
      });
    });

    // 先订阅Socket再发起查询，避免漏消息
    const fetchChats = async () => {
      const data = await fetchChatList();
      queryClient.setQueryData(['chatList'], data);
    };
    fetchChats();

    return unsubscribe;
  }, [queryClient]);

  const { data: chatList } = useQuery({
    queryKey: ['chatList'],
    queryFn: fetchChatList,
    initialData: initialChats,
    select: (data) => {
      // 合并预热数据与请求结果并去重
      if (!data) return initialChats;
      const combined = [...initialChats, ...data];
      return Array.from(new Map(combined.map(chat => [chat.id, chat])).values());
    },
  });

  return <div>{/* 渲染聊天列表 */}</div>;
}

关键注意点 #

• 所有方案必须处理消息去重，避免重复推送或初始结果包含已接收的新消息。
• 优先使用函数式setQueryData，确保基于最新缓存状态更新，避免竞态条件。
• React Query v5中，useIsFetching可指定查询键，精准监听目标查询的拉取状态，不受其他查询干扰。

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