SuperAPI AI 工具集

with-tanstack-query

前端与建站

查看项目

更新于 10-16 03:40

技能介绍

用途:把 React Table v9 与 TanStack Query 组合,实现服务端筛选、排序、分页和无限数据。职责划分是 Query 负责请求与缓存,Table 负责网格状态,并接收已由各 manual 服务端阶段处理好的行数据。

主要能力:以查询键承载表格状态;将查询结果直接交给表格;支持手动分页等 manual* 模式;可用 keepPreviousData 保留上一页数据,避免加载时闪空页。

使用方式:用 useCreateAtom 创建分页状态,useSelector 读取;useQuery 的 queryKey 放入分页、排序、列筛选等所有服务端拥有的状态切片,queryFn 按这些状态请求数据;把 result.data?.rows 直接传给 useTable 的 data,并传入 rowCount 与 manualPagination: true。示例中 features 由 tableFeatures({ rowPaginationFeature }) 构建。

限制与常见错误:不要把查询行复制进额外 state(如用 useEffect 同步),否则会滞后于查询缓存并增加同步路径;不要漏掉查询键中的状态,否则不同请求会复用缓存;manualPagination 只跳过客户端分页,应用必须自行请求已处理页并提供总数;需要保留上一页时显式设置 placeholderData: keepPreviousData。API 细节可查看 node_modules/@tanstack/react-table/dist/index.d.ts 及相关核心特性源码,以及已安装的 @tanstack/react-query 源码中的查询选项类型。