使用 TanStack Query 构建可定制的 Widget 仪表板
仪表板架构的核心问题
当仪表板被设计成单个数据获取操作时，问题就会出现。一个 widget 的故障会导致整个仪表板无法渲染。数据需求不同的 widget 被迫以最慢的那个为准进行等待。用户无法在一部分数据加载完成后就开始与仪表板交互。
TanStack Query 通过将每个查询视为独立的异步资源来解决这个问题。
Widget 级别的数据隔离
每个 widget 组件声明自己的查询：
const { data, isLoading, error } = useQuery({
queryKey: ['widget', widgetId, dateRange],
queryFn: () => fetchWidgetData(widgetId, dateRange),
staleTime: 5 * 60 * 1000, // 5 分钟
refetchInterval: 30 * 1000, // 30 秒自动刷新
})这意味着每个 widget 都有自己的加载和错误状态，可以在不影响其他 widget 的情况下独立刷新，并且可以为不同的数据类型配置不同的缓存策略。
可定制性的实现
仪表板的可定制性意味着用户可以添加、删除和重新排列 widget。每个 widget 的配置（数据源、刷新间隔、可视化类型）存储在用户配置文件中。
TanStack Query 的 queryKey 系统使这变得很自然：widget 配置成为 query key 的一部分，因此配置更改会自动触发数据重新获取。
生产中的错误边界
将每个 widget 包裹在 React ErrorBoundary 中，加上 TanStack Query 的onError 处理，确保单个 widget 故障不会级联。失败的 widget 显示错误状态，而其他 widget 继续正常运行。
缓存策略
不同的 widget 有不同的数据新鲜度要求。实时库存计数需要频繁刷新；历史趋势图可以缓存更长时间。TanStack Query 的 staleTime 和 gcTime 参数允许每个 widget 的精细控制。