如何用React Query高效轮询增量数据？技术方案优化问询

我有一个会被大量用户实时更新的数据库集合，用户需要查看其他成员的更新，但集合规模较大，每次全量下载效率极低、成本高昂。
每个文档都带有updateTime时间戳，我希望按需轮询更新数据（组件挂载时或按其他频率），并将其合并到React Query（使用persistClientQuery）的缓存中。
我是React Query新手，目前使用useInfiniteQuery钩子，以最新的updateTime作为nextPageParam实现该功能，代码如下：

查询实现 #

export function useTalentWithStore() {
    const queryClient = useQueryClient();

    const query = useInfiniteQuery<Talent[]>({
        queryKey: ['talent'],
        getNextPageParam: (lastPage, allPages) => {
            const data = allPages.flat();

            // Use the newest document's updateTime as the next page param
            const times = data.map((tal) => tal?.docMeta?.updateTime);
            if (data.length) {
                const max = Math.max(...times as any);
                return new Date(max);
            }
            return undefined;
        },
        queryFn: async ({ pageParam }) => {
            let talentQuery: firebase.firestore.CollectionReference<firebase.firestore.DocumentData> | firebase.firestore.Query<firebase.firestore.DocumentData>
                = firestore.collection("talent");

            // If the there's a page param, just get documents updated since then, otherwise, get everything
            if (pageParam) {
                talentQuery = talentQuery.where("docMeta.updateTime", ">", pageParam);
            }
            let talentSnapshot = await talentQuery.get();

            const talentUpdates: Talent[] = talentSnapshot.docs.map((doc) => {
                return {
                    id: doc.id,
                    ...doc.data()
                }
            });
            return talentUpdates;
        },
        staleTime: Infinity,
    });

    // Combine new data with any old data, and return a flat object 
    const flatData = useMemo<Talent[] | undefined>(() => {
        const oldData = query.data?.pages?.[0] || [];
        const newData = query.data?.pages?.[1] || [];

        const combinedData: Talent[] = [];
        if (oldData) {
            combinedData.push(...oldData);
        }
        for (const tal of newData) {
            const idx: number = combinedData.findIndex((t) => t.id === tal.id);
            if (idx >= 0) {
                combinedData[idx] = tal;
            } else {
                combinedData.push(tal);
            }
        }

        // If there's any old data, flush it out and replace it with the combined new data
        if (oldData.length) {
            queryClient.setQueryData(['talent'], (data: any) => ({
                pages: [combinedData],
                pageParams: query.data?.pageParams,
            }));
        }

        return combinedData;
    }, [query.data, queryClient]);

    return { ...query, flatData };
}

使用示例 #

const talentQuery = useTalentWithStore();
const talent = talentQuery.flatData;
const [fetchedOnMount, setFetchedOnMount] = useState(false);

useEffect(() => {
    if (!fetchedOnMount && !talentQuery.isFetching) {
        console.log(`Fetching New Talent`, !fetchedOnMount && !talentQuery.isFetching);
        talentQuery.fetchNextPage();
    }
    setFetchedOnMount(true);
}, [talentQuery, fetchedOnMount]);

请问这种实现是否必要？React Query是否原生支持该功能？若没有，还有哪些可考虑的方案或需要注意的陷阱？
（注：代码使用Firestore，但因多种原因，不想使用Firestore的实时更新）

1. 当前实现是否必要？ #

思路方向是对的，但实现有冗余和隐患，并非必须这么复杂：

• 用useInfiniteQuery做增量更新属于“错位使用”，无限查询的多页结构反而增加了数据合并的复杂度——你本质是要增量更新并合并缓存，而非分页加载数据。
• 手动合并数据后调用setQueryData重置pages数组，绕开了React Query原生的缓存更新逻辑，容易引发状态不一致问题，比如pages数量超过2时合并逻辑会失效。

2. React Query是否原生支持该功能？ #

React Query没有专门的“基于时间戳增量更新合并缓存”钩子，但可以通过普通useQuery结合自定义逻辑实现需求，核心用到：

• 利用缓存数据构建增量请求参数
• onSuccess回调合并新数据到缓存
• refetchInterval或手动refetch实现轮询

3. 替代方案与注意陷阱 #

方案一：用useQuery实现增量更新 #

替换无限查询为普通查询，复用缓存中的最新时间戳做增量请求，在onSuccess中自动合并数据：

export function useTalentWithStore() {
  const queryClient = useQueryClient();

  return useQuery<Talent[]>({
    queryKey: ['talent'],
    queryFn: async () => {
      // 从缓存获取当前最新的updateTime
      const cachedData = queryClient.getQueryData<Talent[]>(['talent']);
      const latestUpdateTime = cachedData
        ? new Date(Math.max(...cachedData.map(t => t.docMeta.updateTime)))
        : undefined;

      let talentQuery = firestore.collection("talent");
      if (latestUpdateTime) {
        // 增量请求：仅获取更新时间晚于缓存最新值的文档
        talentQuery = talentQuery.where("docMeta.updateTime", ">", latestUpdateTime);
      } else {
        // 首次请求全量数据，按时间排序确保后续增量逻辑正确
        talentQuery = talentQuery.orderBy("docMeta.updateTime");
      }

      const talentSnapshot = await talentQuery.get();
      return talentSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    },
    staleTime: Infinity,
    // 可选：设置自动轮询间隔，比如30秒
    refetchInterval: 30000,
    // 合并新数据到缓存：覆盖旧数据中同id项，新增项直接追加
    onSuccess: (newData) => {
      queryClient.setQueryData<Talent[]>(['talent'], (oldData) => {
        if (!oldData) return newData;
        const merged = [...oldData];
        newData.forEach(newTal => {
          const index = merged.findIndex(t => t.id === newTal.id);
          if (index !== -1) {
            merged[index] = newTal;
          } else {
            merged.push(newTal);
          }
        });
        return merged;
      });
    },
    // 复用缓存数据作为初始值，避免首次渲染为空
    initialData: () => queryClient.getQueryData<Talent[]>(['talent']),
  });
}

使用时直接取返回的data即可，无需手动合并：

const { data: talent, refetch } = useTalentWithStore();

// 组件挂载时手动触发一次更新（如果不需要自动轮询）
useEffect(() => {
  refetch();
}, []);

方案二：手动管理增量请求与缓存更新 #

如果需要更灵活的触发时机（比如用户手动点击“刷新”），可以单独封装增量请求函数，直接操作缓存：

const fetchTalentUpdates = async (queryClient: QueryClient) => {
  const cachedData = queryClient.getQueryData<Talent[]>(['talent']);
  const latestUpdateTime = cachedData ? new Date(Math.max(...cachedData.map(t => t.docMeta.updateTime))) : undefined;

  let talentQuery = firestore.collection("talent");
  if (latestUpdateTime) {
    talentQuery = talentQuery.where("docMeta.updateTime", ">", latestUpdateTime);
  }

  const snapshot = await talentQuery.get();
  const newData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  
  // 更新缓存
  queryClient.setQueryData<Talent[]>(['talent'], (oldData) => {
    if (!oldData) return newData;
    // 合并逻辑同方案一
    const merged = [...oldData];
    newData.forEach(newTal => {
      const index = merged.findIndex(t => t.id === newTal.id);
      index !== -1 ? merged[index] = newTal : merged.push(newTal);
    });
    return merged;
  });
};

// 在组件中调用
const queryClient = useQueryClient();
const handleRefresh = () => fetchTalentUpdates(queryClient);

注意陷阱 #

• 合并逻辑完整性：必须确保同id文档被正确覆盖，否则会出现重复数据或旧数据残留；当前实现只处理前两页，pages超过2时会失效，这是核心隐患。
• 时间戳精度兼容：Firestore Timestamp和JS Date可能存在精度差异，建议保留原始Timestamp对象做比较，避免漏掉更新。
• 缓存持久化适配：使用persistClientQuery时，要确保合并后的缓存结构能被正确序列化/反序列化，避免持久化后数据丢失或格式错误。
• 首次全量请求性能：如果集合规模极大，首次全量请求仍有性能问题，可以考虑首次请求分页加载，再结合增量更新逻辑。
• 并发请求冲突：同时触发多个增量请求可能导致缓存更新顺序混乱，可通过enabled选项控制请求时机，或在queryFn中加简单锁逻辑。

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