React Query中能否向缓存追加数据？是否有内置API实现？

React Query 没有直接内置自动合并多参数查询缓存到统一 key 的 API，但可以通过两种更优雅的方式实现你的需求，无需手动拼接的繁琐操作：

1. 批量筛选并整合缓存数据 #

使用 queryClient.getQueriesData 方法，通过查询 key 前缀匹配所有与客户端搜索相关的缓存，再自行整合结果：

const getAllCachedClients = () => {
  // 匹配所有以 ["clients"] 为前缀的查询缓存
  const clientQueryEntries = queryClient.getQueriesData({ queryKey: ["clients"] });
  // 扁平化所有缓存数据并过滤空值
  return clientQueryEntries.flatMap(([_, data]) => data ?? []);
};

调用这个函数即可一次性获取所有搜索过的 Client 列表整合数据，无需单独维护一个 ["clients"] 缓存项。

2. 自动同步维护整合缓存 #

如果需要实时维护一个独立的 ["clients"] 缓存项，可以在搜索查询的 onSuccess 钩子中自动更新整合结果：

const useSearchClients = (searchString: string) => {
  return useQuery({
    queryKey: ["clients", searchString],
    queryFn: () => searchClients(searchString),
    onSuccess: (newClients) => {
      queryClient.setQueryData(["clients"], (oldData = []) => {
        // 根据 Client ID 去重，避免重复数据堆积
        const existingIds = new Set(oldData.map(c => c.id));
        return [...oldData, ...newClients.filter(c => !existingIds.has(c.id))];
      });
    }
  });
};

之后直接通过 queryClient.getQueryData(["clients"]) 就能拿到整合后的全量缓存数据。

注意事项 #

• 必须处理数据去重，否则重复搜索会导致缓存数据冗余
• 若存在 Client 数据更新场景，需同步更新对应搜索缓存和整合缓存，避免数据不一致
• 可结合 queryClient.invalidateQueries({ queryKey: ["clients"] }) 批量失效相关缓存，保证数据新鲜度

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