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