SuperAPI AI 工具集

tanstack-query-best-practices

前端与建站

查看项目

更新于 10-15 20:35

技能介绍

用途:为 React 应用实施 TanStack Query(React Query)模式提供系统化规则,优化数据获取、缓存、变更与服务端状态同步。适用于新建数据获取逻辑、配置查询、实现变更与乐观更新、设定缓存策略、SSR/SSG 集成,以及重构既有数据获取代码。

主要能力按优先级分组:

严重级:查询键(始终用数组、包含全部依赖、分层组织 entity→id→filters、工厂模式、保证可 JSON 序列化);缓存(按数据易变性设 staleTime、配置 gcTime、QueryClient 级默认值、定向失效、区分 placeholder 与 initial data)。

高优先级:变更(变更后失效相关查询、乐观更新、onMutate 返回回滚上下文、优雅处理错误、用 isPending 表示加载、useMutationState 跨组件跟踪);错误处理(配合 useQueryErrorResetBoundary 使用错误边界、合理重试、提供回退数据)。

中优先级:预取(悬停/聚焦意图预取、路由切换预取、设置 staleTime、ensureQueryData 条件预取);并行查询(useQueries 动态并行、查询取消);无限查询(提供 getNextPageParam、检查 isFetchingNextPage、大数据集用 maxPages);SSR 集成(dehydrate/hydrate、每请求创建 QueryClient、服务端更高 staleTime、HydrationBoundary 包裹)。

低优先级:性能(select 转换/过滤、结构共享、notifyOnChangeProps 限制重渲染、placeholderData 即时 UI);离线支持(网络模式、查询持久化)。

使用方式:规则存放在 rules/ 目录,每条含解释、坏例、好例与上下文说明,规则前缀如 qk-、cache-、mut-、err-、pf-、inf-、ssr-、parallel-、perf-、offline-。

限制:资料未提供安装命令、版本要求与具体代码示例全文,需查阅各规则文件获取细节。