网络模式

TanStack Query 提供了三种不同的网络模式,以区分在没有网络连接时,QueriesMutations 的行为方式。此模式可以为每个 Query / Mutation 单独设置,也可以通过 query / mutation 默认值全局设置。

由于 TanStack Query 最常与数据获取库结合使用,因此默认网络模式是 在线

网络模式:在线

在此模式下,除非有网络连接,否则 Queries 和 Mutations 不会触发。这是默认模式。如果发起了查询(fetch)请求,并且由于没有网络连接而无法完成,则该查询将始终保持其 状态pendingerrorsuccess)。但是,额外暴露了一个 fetchStatus。它可以是:

  • fetchingqueryFn 正在真正执行 - 请求正在进行中。
  • paused:查询未执行 - 它将 暂停 直到您再次连接网络。
  • idle:查询既未获取也未暂停

标志 isFetchingisPaused 是从这个状态派生出来的,并为方便起见暴露出来。

请注意,仅检查 pending 状态可能不足以显示加载指示器。查询可能处于 state: 'pending',但如果它们是首次挂载且您没有网络连接,则 fetchStatus: 'paused'

如果一个查询在您在线时运行,但在 fetch 过程中您离线了,TanStack Query 也会暂停重试机制。暂停的查询将在您重新获得网络连接后继续运行。这与 refetchOnReconnect(在此模式下也默认为 true)是独立的,因为它不是 refetch,而是 continue。如果在中间查询被 取消,它将不会继续。

网络模式:始终

在此模式下,TanStack Query 将始终进行 fetch,并忽略在线/离线状态。如果您在不需要活动网络连接即可使 Queries 正常工作的环境中使用 TanStack Query,例如仅从 AsyncStorage 读取,或者您只想从 queryFn 返回 Promise.resolve(5),那么您很可能想选择此模式。

  • 查询永远不会因为没有网络连接而暂停
  • 重试也不会暂停 - 如果您的查询失败,它将进入 错误 (error) 状态。
  • refetchOnReconnect 在此模式下默认为 false,因为重新连接网络不再是 stale queries 应该被 refetch 的良好指示。如果您愿意,仍然可以将其打开。

网络模式:离线优先

此模式介于前两种选项之间,TanStack Query 将 queryFn 执行一次,然后暂停重试。如果您有一个 Service Worker 拦截请求以进行缓存,例如在 离线优先 PWA 中,或者您通过 Cache-Control header 使用 HTTP 缓存,这将非常有用。

在这些情况下,第一次 fetch 可能会成功,因为它来自离线存储/缓存。但是,如果缓存未命中,网络请求将发出并失败,在这种情况下,此模式的行为类似于 online 查询 - 暂停重试。

开发工具

TanStack Query Devtools 将显示处于 paused 状态的 Queries,如果它们应该 fetch 但没有网络连接。还有一个切换按钮用于 *模拟离线行为*。请注意,此按钮 *不会* 真正干扰您的网络连接(您可以在浏览器开发者工具中进行操作),但它会将 OnlineManager 设置为离线状态。

签名

  • networkMode: 'online' | 'always' | 'offlineFirst'
    • 可选
    • 默认为 'online'