本文介绍一种更简洁、高效的方式，利用 usequery 结合 queryclient.getquerydata 实现基于时间戳的增量轮询，避免全量重载与复杂分页逻辑，同时自动合并新旧数据。
本文介绍一种更简洁、高效的方式，利用 usequery 结合 queryclient.getquerydata 实现基于时间戳的增量轮询，避免全量重载与复杂分页逻辑，同时自动合并新旧数据。
在处理高频更新、数据量大的集合（如多人协作的 Talent 数据库）时，盲目轮询全量数据不仅浪费带宽和计算资源，还会拖慢用户体验。React Query 本身并不内置“增量合并式轮询”功能，但其设计哲学——以查询为单位管理状态 + 可控的数据获取与缓存策略——恰恰为我们提供了轻量、可组合的解决方案。
核心思路是：每次请求前，主动读取当前缓存中的最新数据，提取最大 updateTime，仅拉取此后变更的文档，并在返回后智能合并（覆盖旧项 + 新增项）。这比 useInfiniteQuery 的分页模拟更贴合“轮询增量更新”的本质，也更易维护。
✅ 推荐实现：useQuery + 缓存感知查询函数
以下是一个生产就绪的封装方案：
// utils/fetchIncremental.ts
import { QueryClient, QueryKey } from '@tanstack/react-query';
import firebase from 'firebase/app';
import 'firebase/firestore';
// 假设 Doc 是你数据库文档的基础类型
interface Doc {
id: string;
docMeta?: { updateTime?: Date | number };
}
// 提取缓存中最新的 updateTime（毫秒时间戳）
function findLargestTimestamp(data: Doc[]): number | null {
if (!data.length) return null;
const timestamps = data
.map(d => d.docMeta?.updateTime)
.filter((t): t is number | Date => t != null);
if (timestamps.length === 0) return null;
return Math.max(...timestamps.map(t => new Date(t).getTime()));
}
// 合并逻辑：用新数据覆盖同 ID 旧数据，保留未变动项
function flattenData<T extends Doc>(oldData: T[], newData: T[]): T[] {
const map = new Map<string, T>();
// 先存所有旧数据
oldData.forEach(item => map.set(item.id, item));
// 再用新数据覆盖或新增
newData.forEach(item => map.set(item.id, item));
return Array.from(map.values());
}
// 通用增量查询函数
export async function getFreshCollection<T extends Doc>(
queryKey: QueryKey,
queryClient: QueryClient,
collectionName: string
): Promise<T[]> {
const oldData = (queryClient.getQueryData(queryKey) as T[]) || [];
const updatedSince = findLargestTimestamp(oldData);
let firebaseQuery = firebase.firestore().collection(collectionName);
if (updatedSince !== null) {
firebaseQuery = firebaseQuery.where('docMeta.updateTime', '>', updatedSince);
}
const snapshot = await firebaseQuery.get();
const newData = snapshot.docs.map(doc => ({
id: doc.id,
...doc.data(),
})) as T[];
return flattenData(oldData, newData);
}// hooks/useTalent.ts
import { useQuery } from '@tanstack/react-query';
import { getFreshCollection } from '../utils/fetchIncremental';
export function useTalent() {
const queryKey = ['talent'] as const;
const queryClient = useQueryClient();
const query = useQuery({
queryKey,
queryFn: () => getFreshCollection<Talent>(queryKey, queryClient, 'talent'),
staleTime: Infinity, // 数据永不自动过期（由业务逻辑控制刷新）
refetchOnMount: 'always', // 组件挂载时强制触发增量拉取
refetchInterval: 30_000, // 可选：每 30 秒轮询一次（根据业务容忍度调整）
retry: 2,
onError: (err) => {
console.error('[useTalent] Incremental fetch failed:', err);
// 可集成 Sentry 或触发降级提示
},
});
return query;
}⚠️ 关键注意事项与最佳实践
- staleTime: Infinity 要谨慎使用：它意味着数据永远“新鲜”，除非手动调用 invalidateQueries 或 refetch。若业务允许短暂延迟（如 5–30 秒），建议设为合理值（如 5 * 60 * 1000），配合 refetchOnMount 和 refetchInterval 实现平衡。
- 时间戳精度与 Firestore 查询限制：确保 docMeta.updateTime 字段已建立升序索引（Firestore 控制台或 CLI 中配置），否则 where("docMeta.updateTime", ">", timestamp) 查询会失败。
- 合并逻辑需幂等：flattenData 必须保证多次执行结果一致（例如不依赖外部状态、不修改原数组）。推荐使用 Map 或 reduce 实现 O(n) 合并。
- 避免竞态条件：由于 getQueryData 读取的是同步快照，而 setQueryData 不会触发重新渲染，因此整个流程天然安全；但若在 onSuccess 中手动 setQueryData，请确保与 useQuery 的默认行为不冲突。
- 错误边界处理：网络中断或权限异常时，旧数据仍保留在缓存中，用户界面不受影响。可通过 errorBoundary 或 query.status === 'error' 显式提示。
✅ 总结
你无需用 useInfiniteQuery 模拟轮询——那本质上是为分页列表设计的模式。对于“持续同步某集合最新状态”的场景，useQuery + 缓存感知的 queryFn 才是更自然、更可控的选择。它结构清晰、调试友好、易于测试，且完全契合 React Query 的缓存范式：数据即状态，查询即同步契约。
只要确保时间戳字段可索引、合并逻辑健壮、轮询频率合理，这套方案就能以极小的代码开销，支撑数千用户的实时协同视图。
