TanStack Query 提供了三种不同的网络模式,用于区分在没有网络连接时 Queries 和 Mutations 的行为方式。此模式可以为每个 Query / Mutation 单独设置,或者通过 query / mutation 默认值进行全局设置。
由于 TanStack Query 最常与数据获取库结合使用,因此默认网络模式是 在线。
在此模式下,除非有网络连接,否则 Queries 和 Mutations 不会触发。这是默认模式。如果为查询发起了 fetch,由于没有网络连接而无法完成 fetch,则该查询将始终停留在其 state (pending、error、success)状态。但是,额外公开了一个 fetchStatus。它可以是
isFetching 和 isPaused 这两个标志是从此状态派生出来的,为了方便起见而公开。
请记住,仅检查 pending 状态可能不足以显示加载 spinner。Queries 可能处于 state: 'pending',但如果它们是第一次挂载且您没有网络连接,则 fetchStatus: 'paused'。
如果查询是因为您在线而运行,但您在 fetch 仍在进行时离线,TanStack Query 也会暂停重试机制。暂停的查询将在您重新获得网络连接后继续运行。这独立于 refetchOnReconnect(在此模式下也默认为 true),因为它不是 refetch,而是 continue。如果查询在此期间被 取消,它将不会继续。
在此模式下,TanStack Query 将始终进行 fetch 并忽略在线/离线状态。如果您在不需要活动网络连接即可运行 Queries 的环境中(例如,您只是从 AsyncStorage 读取,或者您只想从 queryFn 返回 Promise.resolve(5)),这很可能是您想要选择的模式。
此模式是前两种选项之间的折衷,TanStack Query 将执行一次 queryFn,但随后暂停重试。这对于拥有 serviceWorker 来拦截缓存请求(如 离线优先 PWA)或通过 Cache-Control header 使用 HTTP 缓存非常有用。
在这些情况下,第一次 fetch 可能会成功,因为它来自离线存储/缓存。但是,如果发生缓存未命中,网络请求将发出并失败,在这种情况下,此模式的行为类似于 online 查询 - 暂停重试。
当查询应该 fetch 但没有网络连接时,TanStack Query Devtools 将会显示 paused 状态的 Queries。还有一个切换按钮可以 模拟离线行为。请注意,此按钮实际上不会干扰您的网络连接(您可以在浏览器开发者工具中做到这一点),但它会将 OnlineManager 设置为离线状态。