项目中混用useQueryClient与new QueryClient，如何检查QueryClient实例数量？

一、是否会创建多个QueryClient实例？ #

是的，这两种写法会产生多个独立的实例：

• useQueryClient() 是从React上下文里取你通过QueryClientProvider注入的全局唯一实例，每次调用都拿到同一个对象。
• 但只要调用一次 new QueryClient()，就会生成一个全新的实例——如果在多个地方调用，或者组件每次渲染都执行这句代码，就会不断创建新的实例。

这些独立实例的缓存、配置完全隔离，会导致缓存不共享、内存浪费，甚至业务逻辑出现异常，比如同一接口在不同实例里缓存结果不一致。

二、如何检查已创建的QueryClient实例数量？ #

1. 临时调试：给构造函数加计数 #

在项目入口或者全局配置文件里，给QueryClient的构造函数加个统计逻辑，每次创建实例时打印数量：

import { QueryClient } from '@tanstack/react-query';

const OriginalQueryClient = QueryClient;
let instanceCount = 0;

// 重写构造函数
QueryClient = function(...args) {
  instanceCount++;
  console.log(`当前已创建 ${instanceCount} 个QueryClient实例`);
  return new OriginalQueryClient(...args);
};

这样每次调用new QueryClient()，控制台都会实时输出当前的实例总数，快速定位哪里在重复创建。

2. 可控跟踪：封装创建函数 #

把创建实例的逻辑封装成全局函数，用集合来维护所有实例，还能配合销毁逻辑清理：

import { QueryClient } from '@tanstack/react-query';

const queryClientInstances = new Set();

// 代替直接new，用这个函数创建实例
export function createQueryClient(options) {
  const client = new QueryClient(options);
  queryClientInstances.add(client);
  
  // 重写destroy方法，销毁时从集合中移除
  const originalDestroy = client.destroy;
  client.destroy = function() {
    originalDestroy.call(this);
    queryClientInstances.delete(client);
  };
  
  return client;
}

// 随时查看实例数量
console.log(`当前QueryClient实例总数：${queryClientInstances.size}`);

这种方式适合长期监控，还能避免实例销毁后留在集合里导致的统计不准。

3. 浏览器工具排查 #

• 打开React DevTools，找到QueryClientProvider组件，查看它提供的实例（这是全局共享的那个）。
• 打开Chrome DevTools的内存面板，拍个快照后搜索QueryClient，就能看到所有已创建的实例数量和详情，适合排查内存泄漏问题。

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