tanstackQuery中 isPending 与 isFetching 的区别

在 tanStack Query（以前称为 React Query）中，isPending 和 isFetching 都是用来描述查询状态的布尔值属性，但它们表示的是不同阶段和情况下的加载状态。理解两者的区别有助于更好地管理应用中的加载指示器和用户界面反馈。

isFetching

• 定义：isFetching 为 true 表示当前有一个网络请求正在进行中以获取最新数据。这可能是因为查询首次被触发、由于配置（如 staleTime）导致的数据过期而重新获取、或者因为调用了 invalidateQueries 等方法手动使缓存失效并重新获取。
• 场景：当你想要显示一个全局或局部的加载指示器，告知用户正在从服务器拉取最新信息时，可以使用 isFetching。

isPending

• 定义：isPending 是一个更严格的加载标志，它只会在查询第一次尝试获取数据时为 true。也就是说，当查询刚开始并且还没有接收到第一个成功的响应之前，isPending 为 true。一旦查询成功完成了一次，并且有了有效的缓存数据，即使后续发生了重新获取，isPending 也不会再变为 true。
• 场景：如果你希望区分初次加载和后续刷新/更新的状态，那么 isPending 可以帮助你实现这一点。例如，在页面初始化期间展示一个“正在加载...”的消息，而在之后的数据刷新时不显示该消息。

总结

简单来说：

• 使用 isFetching 来标识任何时刻的数据获取活动，包括初次加载和所有后续的重新获取。
• 使用 isPending 来标识仅限于初次加载的过程，即查询尚未完成其最初的网络请求之前的状态。

这两个状态可以帮助开发者更精细地控制 UI 的行为，比如显示不同的加载提示或禁用某些交互元素直到数据稳定下来。根据你的应用需求选择合适的属性来反映正确的加载状态。