Trpc useQuery频繁触发加载问题排查求助

• 检查modelId是否在交互时意外变更
  useQuery的查询键（此处为{modelId}）一旦变化，就会触发新的查询。可以在组件内添加如下代码监控值的变化：

  console.log('当前modelId:', modelId);
  

  观察每次用户交互时该值是否出现非预期的变化，比如从undefined变为有效值、或因引用类型（如对象）重新创建导致键值变更。

• 确认组件是否被频繁卸载/重新挂载
  如果useQuery所在的组件在用户交互时反复卸载再挂载，即使设置了refetchOnMount: false，首次挂载时仍会发起初始请求。可以通过以下代码监控组件的挂载状态：

  useEffect(() => {
    console.log('组件已挂载');
    return () => console.log('组件已卸载');
  }, []);
  

  判断是否存在频繁重建的情况。

• 排查tRPC与react-query的版本兼容性
  部分旧版本的tRPC或react-query可能存在配置不生效的bug。建议查看官方文档确认版本匹配要求，尝试升级到最新稳定版后再测试问题是否解决。

• 检查是否存在手动触发重取的代码
  搜索项目中是否有调用refetch()、queryClient.invalidateQueries()或queryClient.refetchQueries()等方法，且目标查询键与当前useQuery的键匹配，这些操作会在交互时主动触发查询重取。

• 验证react-query全局配置是否覆盖组件选项
  查看创建queryClient时的全局默认配置，确认是否设置了强制重取的选项。例如：

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: true,
      },
    },
  });
  

  虽然组件级配置优先级高于全局，但部分版本可能存在异常，可临时将全局配置改为与组件一致后测试。

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