React Query 按需查询

date

Nov 5, 2025

slug

react-query-search-demand

status

Published

开篇：不是所有查询都需要"急吼吼"

之前咱们看到的例子，React Query 都像个急性子——组件一挂载，立马就去拿数据。这就像你刚进餐厅，服务员就把菜全上齐了。大部分时候这样挺好，但有时候你得先看看菜单不是？

比如说，用户还没输入搜索关键词呢，你就去搜索啥呢？搜空气吗？😅

第一个坑：React 的规矩不能破

假设我们要给 GitHub Issues 应用加个搜索框，你可能会这么写：

看起来挺合理的对吧？"有搜索词我才查询嘛！"

但 React 直接给你一个大红叉：不准在条件语句里调用 Hook！

这就像在篮球场上，你不能说"我心情好的时候才遵守规则"。规则就是规则！

`enabled`：你的查询"开关"

React Query 给了我们一个优雅的解决方案——enabled 属性。这就像给查询装了个开关：

enabled 就是在说："老板，给我个信号，我才开始干活！"

状态的迷宫：`pending` ≠ `loading`

现在问题来了，当我们使用了 enabled，状态管理变得有点... 烧脑了。

看看这个场景：

用户啥都还没输，就看到了加载动画？这就像你刚进健身房，教练就说"休息一下吧"——这不对劲啊！

真相大白：状态的精确拆解

原来 pending 只是说："缓存里没东西"。它可不管你是不是正在获取数据！

这就像你说"冰箱是空的"，但这不代表你正在去超市买菜，你可能就是... 懒得去买。

React Query 给了我们更精确的工具：

属性	描述	含义
`status`	缓存状态	`pending`（没货）、`success`（有货）、`error`（进货失败）
`fetchStatus`	网络活动状态	`fetching`（正在获取）、`idle`（在家躺着）、`paused`（路上堵车）

`isLoading`：组合技（真·加载中）

React Query 贴心地给了我们一个组合属性，它才是真正的“加载中”：

翻译成人话就是："缓存里没货，而且我正在去买"。这才是真正的"加载中"！

完整的状态处理

让我们把所有情况都处理好：

⚠️ 关键提醒： 我们必须显式检查 status === "success" 才能安全地使用 data。这就像你必须确认快递已送达，才能去取包裹。

TypeScript 玩家专属福利：`skipToken`

如果你是 TypeScript 用户，可能会遇到类型问题：

虽然我们用 enabled 保证了不会真的调用，但 TypeScript 不认账啊！

解决方案：`skipToken`

React Query 提供了一个优雅的解决方案：

skipToken 就像是给 TypeScript 的一个官方证明："放心，我真的不会执行查询！" 并且可以同时解决 enabled 的条件判断和 queryFn 的类型安全问题。

另辟蹊径：条件渲染大法

有时候，最简单的方法反而最好。与其纠结 enabled，不如直接条件渲染组件：

这样 IssueList 组件就可以简单很多：

这就像是："与其教服务员什么时候上菜，不如客人准备好了再叫服务员。"

总结：知己知彼，百战不殆

按需获取的核心要点：

用 enabled 或 skipToken 控制查询时机，避免在条件语句里调用 Hook。

理解状态的真正含义：pending ≠ 正在加载；isLoading = 真正的加载状态。

永远先检查 status === 'success' 再使用 data。

TypeScript 用户用 skipToken 来同时解决逻辑控制和类型安全。

条件渲染是简化逻辑的利器，不要过度依赖 enabled。

记住：React Query 给了你很多工具，但关键是要理解每个工具的用途。就像厨房里的刀具，每把都有自己的用途，用对了事半功倍，用错了... 小心切到手！🔪