SuperAPI AI 工具集

tanstack-react-table-with-tanstack-query

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 React 中把 TanStack Table v9 与 TanStack Query 组合使用,由 Query 负责数据抓取与缓存,Table 负责表格状态,并接收已经过服务端各处理阶段(筛选、排序、分页)加工后的行数据。

主要能力:支持服务端筛选、排序、分页与无限数据;通过查询键(query key)同步表格状态;使用 manualPagination 等 manual* 选项交由服务端处理,并提供 rowCount 总行数。

必要用法:将分页、排序、列筛选等所有由服务端拥有的状态切片都放进 useQuery 的 queryKey,把 queryFn 指向按这些状态请求数据的接口,再把查询结果的 rows 直接传给 useTable,例如 data: result.data?.rows ?? emptyRows,并配合 manualPagination: true 与 rowCount: result.data?.rowCount。分页状态可用 @tanstack/react-store 的 useCreateAtom 与 useSelector 管理。示例中查询键为 ['people', pagination],请求 /api/people?page=${pagination.pageIndex}&size=${pagination.pageSize}。

限制与注意:manualPagination 只跳过客户端分页,应用必须自己抓取处理后的页并提供总数,它不会自动发起请求;不要用 useEffect 把查询结果再复制到另一层 state,否则会滞后于查询缓存并增加同步路径;查询键必须包含表格状态,否则不同服务端请求会复用同一缓存;抓取时若不想出现空白过渡,可设置 placeholderData: keepPreviousData。API 细节可查看 node_modules/@tanstack/react-table/dist/index.d.ts 与相关 core 功能源码,以及已安装的 @tanstack/react-query 源码。具体无限数据用法与更多 option 类型资料暂未提供完整细节。