SuperAPI AI 工具集

tanstack-react-query-best-practices

前端与建站

查看项目

更新于 10-15 20:10

技能介绍

用途:在编写或评审 React 中的 TanStack Query 代码时提供缓存驱动的服务端状态约定,目标是可靠的加载与错误处理,以及写入后聚焦的缓存更新。

主要能力与约定:让 TanStack Query 负责请求生命周期与缓存标识,不要用 effect 和本地状态重复实现;把一切会改变响应的请求输入纳入缓存标识,避免不同结果复用同一缓存项;请求输入只从查询函数的 context 参数读取,不要用被捕获的请求变量;标识缺失时保持缺失并禁用请求,而不是编造记录键。对可见性敏感的数据按操作者身份分区,但不得在键中暴露凭据。在展示消费数据前先解析查询状态,可在 Loader 与内层边界处解析,使展示层不接触可选数据与传输状态;通过 loader prop 契约发布查询标识,让已解析组件接收非空数据。只解构实际使用的查询字段,使依赖与 props 表达语义需求。变更的数据、回调与缓存更新按每次操作限定作用域;使用具名的 mutation 结果字段,因为完整的 useMutation 结果不具备引用稳定性;变化的操作输入通过 mutation variables 传入,而非 hook 构造闭包;在调用 mutation 前解析用户可控的值。按调用生命周期拆分回调,把每次调用的策略放在定义中,把已挂载 UI 的后果放在调用点,而不是用聚合状态 effect。成功后按实际使用的 variables 使窄范围的失效缓存项失效。

使用方式:给出库来源:GitHub 仓库 ID 为 TanStack/query,Context7 库 ID 为 /tanstack/query,DeepWiki 仓库 ID 为 TanStack/query;使用 Context7 查阅最新文档,用 DeepWiki 查看实现细节;编写或评审前先阅读适用于当前任务的参考资料。

适用场景:React 项目中查询、变更、查询键与缓存更新的创建与代码评审。

限制:本资料未提供具体安装命令、版本要求、示例代码或性能数据,暂未提供。