React Query 离线支持

date

Nov 6, 2025

slug

react-query-offline-support

status

Published

开篇：网络的浪漫与现实

网络获取数据确实很神奇——全球的电脑通过看不见的连接交流着。但就像人际交往一样，这种交流并不总是完美的：

更糟的是，原生fetch API遇到断网时只会扔给你一个莫名其妙的错误：

React Query的离线魔法：暂停而非崩溃

React Query说："断网？没事，我等你！"

fetchStatus的三种状态

这就像外卖配送：

idle：外卖已送达，骑手在休息

fetching：骑手正在送餐路上

paused：下雨了，骑手在躲雨，等雨停了继续送

实战演示：离线体验

为什么用isPending而不是isLoading？

记住这个公式：

这就像：

isLoading：我正在努力获取数据（转圈圈）

isPending：我还没有数据（可能在获取，可能断网了）

networkMode：三种应对策略

策略一：online（默认）- 没网就等着

行为：

有网：正常请求

断网：暂停，等网络恢复

适用：需要网络的真实API

这就像：没信号就不发微信，等有信号再发。

策略二：always - 管他有没有网

行为：

有网：执行

断网：还是执行

适用：本地计算、不需要网络的操作

这就像：手机没信号也能用计算器。

策略三：offlineFirst - 先看缓存

这个最有意思！看看GitHub API的响应头：

这告诉浏览器："这个数据缓存60秒"

工作流程：

这就像：

你昨天下载了一集电视剧

今天地铁上没网，但还能看昨天下载的

看完了？那就等有网再下载新的

突变的离线处理：排队理论

查询断网还好说，但突变（修改数据）断网就麻烦了：

React Query的突变队列

这就像银行的离线交易：

周末ATM机离线，但还能记录交易

周一联网后，按顺序处理所有交易

优化：避免中间状态闪烁

问题：每个突变完成都会刷新UI，导致闪烁

解决方案：只在最后一个突变完成时刷新

这就像：

错误方式：10个人改文档，每人改完都刷新页面

正确方式：等所有人都改完，最后刷新一次

完整的离线应用示例

离线支持最佳实践

1. 区分关键和非关键数据

2. 提供清晰的离线反馈

3. 突变的离线处理

测试离线功能

Chrome DevTools技巧：

F12打开开发者工具

Network标签

选择"Offline"

或用React Query DevTools的WiFi图标

总结

React Query的离线支持就像给你的应用装了UPS（不间断电源）：

自动暂停和恢复：断网不崩溃，有网自动续

缓存优先：能用缓存就用缓存

突变队列：记住所有操作，联网后按序执行

灵活配置：根据需求选择策略

记住：好的离线体验不是"没网就不能用"，而是"没网也能用，有网更好用"！

让你的应用成为用户在地铁、飞机、地下室的好伙伴！

今天的"断网求生指南"就到这里！如果你曾经在地铁里因为断网而抓狂，或者因为离线功能救了你一命，欢迎在评论区分享你的故事！下期见！ 📶✨