Ant Design Pro中React-Query禁用窗口聚焦刷新的正确配置方式

在使用Ant Design Pro进行前端开发时，许多开发者会选择集成React-Query来管理数据请求状态。React-Query默认会在窗口重新获得焦点时自动刷新数据，这一行为虽然对保持数据新鲜度很有帮助，但在某些场景下可能并不需要。

问题背景

React-Query的refetchOnWindowFocus配置项控制着当用户切换回应用窗口时是否自动重新获取数据。默认情况下，这个选项是开启的，这可能导致不必要的网络请求和组件重新渲染。

在Ant Design Pro项目中，开发者可能会尝试通过umi配置来禁用这一行为，但发现配置没有生效。这是因为配置位置不正确导致的常见问题。

正确配置方法

要在Ant Design Pro中正确禁用窗口聚焦刷新，应该在src/app.ts文件中进行配置，而不是在umi配置文件中。以下是具体实现方式：

// src/app.ts
import { defineConfig } from 'umi';

export const reactQuery = {
  queryClient: {
    defaultSettings: {
      queries: {
        refetchOnWindowFocus: false,
        staleTime: 5 * 60 * 1000, // 推荐同时设置数据过期时间
      },
    },
  },
};

// 其他应用配置...

配置解析

1. 配置位置：必须在src/app.ts中导出reactQuery对象
2. 层级结构：配置需要遵循React-Query的客户端设置结构
3. 相关配置：建议同时设置staleTime来控制数据缓存时间

为什么需要这样配置

Ant Design Pro基于Umi框架，而Umi对React-Query的集成有特定的配置加载机制。src/app.ts是Umi约定的运行时配置文件，在这里导出的配置会被正确加载和应用到React-Query实例上。

最佳实践建议

1. 按需配置：不是所有场景都需要禁用窗口聚焦刷新，对于实时性要求高的数据可以保持默认
2. 结合缓存策略：合理设置staleTime和cacheTime可以更好地控制数据新鲜度
3. 局部覆盖：可以在具体查询中使用useQuery的选项覆盖全局配置

总结

在Ant Design Pro项目中正确配置React-Query的窗口聚焦刷新行为需要注意配置文件的放置位置。通过src/app.ts文件进行全局配置是最可靠的方式，同时建议开发者根据实际业务需求灵活调整数据获取策略，在数据实时性和性能之间取得平衡。