Refine项目中useList钩子的isLoading状态问题解析

问题背景

在使用Refine框架的useList钩子时，开发者发现了一个关于isLoading状态管理的异常现象。当组件接收不同的props作为查询键(queryKey)时，只有首次加载会正确显示isLoading为true，后续查询键变更时isLoading始终为false，这不符合预期行为。

技术原理分析

这种现象的根源在于Refine默认启用了React Query的keepPreviousData配置项。该配置项的设计初衷是为了在查询键变更时保留上一次查询的数据，实现平滑过渡效果。然而，这种机制会影响到isLoading状态的正确反映。

在React Query的工作机制中：

1. 当keepPreviousData为true时，查询键变更不会触发isLoading状态更新
2. 只有isFetching状态会反映数据获取过程
3. 这种设计是为了避免UI在数据过渡时出现闪烁

解决方案

针对这一问题，Refine提供了两种解决方案：

1. 全局配置方案：通过Refine组件的clientConfig选项，可以全局禁用keepPreviousData

<Refine
  options={{
    reactQuery: {
      clientConfig: {
        defaultOptions: {
          queries: {
            keepPreviousData: false,
          },
        },
      },
    },
  }}
/>

2. 局部覆盖方案：在具体使用useList的地方，通过queryOptions参数覆盖默认行为

useList({
  queryOptions: {
    keepPreviousData: false
  }
})

最佳实践建议

1. 对于需要精确反映加载状态的场景，建议禁用keepPreviousData
2. 对于需要平滑过渡效果的场景，可以保留默认配置，但需注意使用isFetching而非isLoading
3. 在组件设计时，应明确区分首次加载和后续加载的UI表现需求

框架设计考量

Refine团队选择默认启用keepPreviousData是出于历史兼容性和平滑过渡的考虑。在早期版本中，Refine管理路由时这种配置能提供更好的用户体验。随着技术演进，未来版本可能会调整这一默认行为，给予开发者更多选择权。

理解这一机制有助于开发者更好地利用Refine框架构建稳定、用户体验良好的应用，特别是在处理动态查询和数据加载场景时。