SuperAPI AI 工具集

react-impl-data-fetching

数据与分析

查看项目

更新于 10-15 22:18

技能介绍

用途:在 React 项目中从 API 获取数据、管理服务端状态、实现加载与错误状态,并选择合适的数据获取策略,避免常见反模式。

主要能力:提供数据获取策略决策树,推荐服务端状态使用 TanStack Query;读取用 useQuery/useSuspenseQuery,写入用 useMutation 配合 invalidateQueries,分页用 useInfiniteQuery;React Router 场景可用 loader;React 19 可用 use() 读取已缓存 promise。涵盖 QueryClient 配置(staleTime、gcTime、retry、refetchOnWindowFocus)、缓存与失效、预取、乐观更新、分页、错误处理与 ErrorBoundary 集成。

使用方式:在组件外创建 QueryClient 并用 QueryClientProvider 包裹应用;queryKey 使用数组并包含全部依赖变量;useSuspenseQuery 需同时包裹 Suspense 与 ErrorBoundary;React 19 的 use() 需在渲染外缓存 promise。

限制与警告:不要在 useEffect 中无清理标记地取数,避免竞态;不要用 useState+useEffect 管理服务端状态;不要在渲染体内新建 promise;invalidateQueries 需等待 mutation 完成。React 18 不支持 use()。具体安装命令与版本要求资料未提供。