Refine useTable 关联数据实战用 useMany 在列表表格中批量拉取外键对应的记录v3 API【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文以 Refine v3pankod/refine-core文档中useTable页面的 FAQ 示例为骨架完整讲解列表页的关联数据问题当表格记录的某个字段只存了外键 id例如文章只存了category.id如何通过useManyHook 一次性批量拉取关联资源分类的完整数据并渲染到表格中。读完本篇你将掌握useTable与useMany的标准组合方式、queryOptions.enabled的条件查询技巧以及从 Refine 源码层面理解useMany的缓存键生成与getMany/getOne降级机制。问题场景表格列需要展示关联资源的字段Refine 的useTable是一个 headless Hook它只根据排序、过滤、分页状态从当前资源的端点取数据本身不会帮你 JOIN 其他资源。典型的数据模型是资源posts的每行数据里category字段只有{ id }外键没有title表格却需要在 Category 列显示分类标题。v3 官方文档在useTable页面的 FAQHow can I handle relational data?给出的答案就是用useMany按当前页所有行的外键 id 批量拉取categories资源再在前端做 id 映射。下文完整继承该 FAQ 的官方示例代码并逐段拆解。完整示例代码继承自 v3 官方 FAQ 示例下面这段代码来自 useTable 关联数据示例运行在/posts路由上渲染一个包含 ID、Title、Status、Created At、Category 五列的表格import React from react; import { IResourceComponentsProps, useTable, // 用于批量拉取关联数据 useMany, HttpError, } from pankod/refine-core; interface ICategory { id: number; title: string; } interface IPost { id: number; title: string; content: string; status: published | draft | rejected; createdAt: string; // 关联字段只保留了外键 id category: { id: number; }; } const PostList: React.FCIResourceComponentsProps () { const { tableQueryResult } useTableIPost, HttpError(); const posts tableQueryResult?.data?.data ?? []; // Fetches the category of each post. It uses the useMany hook to fetch the category data from the API. const { data: categoryData, isLoading: categoryIsLoading } useMany ICategory, HttpError ({ resource: categories, // Creates the array of ids. This will filter and fetch the category data for the relevant posts. ids: posts.map((item) item?.category?.id), queryOptions: { // Set to true only if the posts array is not empty. enabled: !!posts.length, }, }); if (tableQueryResult?.isLoading) { return divLoading.../div; } return ( div h1Posts/h1 table thead tr thID/th thTitle/th thStatus/th thCreated At/th thCategory/th /tr /thead tbody {posts.map((post) ( tr key{post.id} td{post.id}/td td{post.title}/td td{post.status}/td td{new Date(post.createdAt).toDateString()}/td td {categoryIsLoading ? loading... : // Gets the title of the category from the categoryData object, which is the result of the useMany hook. categoryData?.data.find( (item) item.id post.category.id, )?.title || -} /td /tr ))} /tbody /table /div ); };官方 live preview 的入口部分注册资源并渲染演示组件在文档站中通过setRefineProps把PostList挂到resources: [{ name: posts, list: PostList }]上最终渲染RefineHeadlessDemo /这些是文档站自身的脚手架调用实际项目里只需把PostList作为posts资源的list组件注册到Refine即可。逐段拆解这个组合模式的四个关键点1. 先用 useTable 拿到当前页数据const { tableQueryResult } useTableIPost, HttpError(); const posts tableQueryResult?.data?.data ?? [];v3 中useTable内部通过useList完成请求见 useTable 文档返回tableQueryResultTanStack Query 的useQuery结果。这里把data兜底为空数组保证后续posts.map在请求未回来时不会报错。2. ids从当前页记录中提取外键集合ids: posts.map((item) item?.category?.id)useMany只接受两个核心入参resource与ids见 useMany 文档。把当前页所有行的category.id收集成数组传入意味着只请求本页需要的分类——翻页或过滤后ids变化useMany会触发新一轮请求关联数据始终与表格数据保持同步。3. queryOptions.enabled空列表时跳过请求queryOptions: { enabled: !!posts.length, }这是示例里容易忽略但很实用的细节当posts为空比如过滤条件命中 0 条记录时ids是一个空数组此时让查询处于 disabled 状态避免发出无意义的GET categories请求。从源码结构看这一机制在useMany内部有双重保障。useMany 实现 中查询默认以enabled: hasIds hasResource开启随后...queryOptions展开允许业务侧覆盖enabled。也就是说官方示例的enabled: !!posts.length正是利用queryOptions覆盖默认行为。4. 渲染loading 态 find 映射 兜底值{categoryIsLoading ? loading... : categoryData?.data.find((item) item.id post.category.id)?.title || -}关联数据与主数据是两条独立的查询链加载时机不同主表格等待tableQueryResult.isLoading分类列等待categoryIsLoading。渲染时对每个 post 在categoryData.data中按id post.category.id查找标题找不到时回退为-避免脏外键导致整列崩溃。源码视角useMany 是怎么工作的示例之所以可以放心地翻页后自动重新拉取根因在 useMany 的源码查询键queryKey包含 idskeys().data(pickedDataProvider).resource(identifier).action(many).ids(...(ids ?? [])).params(...).get()useMany.ts#L176-L189。ids 变化会生成新 queryKey从而触发新请求相同 ids 则命中 TanStack Query 缓存翻页回原页时基本零成本。优先走 dataProvider 的getManyqueryFn内先判断if (getMany)调用getMany({ resource, ids, meta })useMany.ts#L196-L201。无getMany时降级为逐个getOne若 dataProvider 未实现getManyuseMany会用handleMultiple对每个 id 并发调用getOneuseMany.ts#L203-L211。这与 useMany 文档中的 caution 一致能批量取就不要一条一条取建议在 dataProvider 中实现getMany。返回值结构返回{ query, result }其中result.data是数组无数据时回退为冻结空数组useMany.ts#L261-L267因此前端可以放心地直接.find。实时订阅Hook 挂载时还会调用useResourceSubscription向 LiveProvider 订阅resources/{resource}频道useMany.ts#L157-L174配置了 LiveProvider 的分类数据更新同样可以实时刷新。版本提示v3 与新版返回结构差异本文示例严格对应 v3pankod/refine-core的 APIuseTable返回tableQueryResult示例中以tableQueryResult?.data?.data读取行数组。需要说明的是仓库当前主版本v4/v5包名refinedev/core对 Hook 返回值做了重命名从 当前 useMany 源码 可以确认新版useMany返回query与resultresult.data为数组而新版useTable文档将对应返回项标记为tableQuery/result参见 新版 useTable 文档。如果你在维护 v5 项目useTable 提取 ids → useMany 批量拉取关联 → find 映射渲染的整体模式完全一致只需按新版返回结构调整取数字段即可。适用边界与小结适用关联记录数量有限、且后端没有提供聚合/JOIN 端点时前端批量映射是低成本方案queryOptions.enabled 缓存键机制保证了空列表不发请求、重复 ids 不重复请求。边界useMany的ids规模受限于单页记录数本例默认pageSize为 10所以该模式天然与分页配合良好若单页数据量很大应从后端聚合端点解决而不是继续放大ids数组。一句话总结useTable负责当前页主数据 排序/过滤/分页状态useMany负责按外键 id 批量补齐关联数据两者通过posts.map((item) item?.category?.id)这一行代码衔接是 Refine 处理列表页关联展示的标准姿势。延伸阅读仓库内路径useTable v3 文档FAQ 来源页useMany v3 文档useMany 源码实现useTable 关联数据示例原文【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Refine useTable 关联数据实战：用 useMany 在列表表格中批量拉取外键对应的记录（v3 API）
Refine useTable 关联数据实战用 useMany 在列表表格中批量拉取外键对应的记录v3 API【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文以 Refine v3pankod/refine-core文档中useTable页面的 FAQ 示例为骨架完整讲解列表页的关联数据问题当表格记录的某个字段只存了外键 id例如文章只存了category.id如何通过useManyHook 一次性批量拉取关联资源分类的完整数据并渲染到表格中。读完本篇你将掌握useTable与useMany的标准组合方式、queryOptions.enabled的条件查询技巧以及从 Refine 源码层面理解useMany的缓存键生成与getMany/getOne降级机制。问题场景表格列需要展示关联资源的字段Refine 的useTable是一个 headless Hook它只根据排序、过滤、分页状态从当前资源的端点取数据本身不会帮你 JOIN 其他资源。典型的数据模型是资源posts的每行数据里category字段只有{ id }外键没有title表格却需要在 Category 列显示分类标题。v3 官方文档在useTable页面的 FAQHow can I handle relational data?给出的答案就是用useMany按当前页所有行的外键 id 批量拉取categories资源再在前端做 id 映射。下文完整继承该 FAQ 的官方示例代码并逐段拆解。完整示例代码继承自 v3 官方 FAQ 示例下面这段代码来自 useTable 关联数据示例运行在/posts路由上渲染一个包含 ID、Title、Status、Created At、Category 五列的表格import React from react; import { IResourceComponentsProps, useTable, // 用于批量拉取关联数据 useMany, HttpError, } from pankod/refine-core; interface ICategory { id: number; title: string; } interface IPost { id: number; title: string; content: string; status: published | draft | rejected; createdAt: string; // 关联字段只保留了外键 id category: { id: number; }; } const PostList: React.FCIResourceComponentsProps () { const { tableQueryResult } useTableIPost, HttpError(); const posts tableQueryResult?.data?.data ?? []; // Fetches the category of each post. It uses the useMany hook to fetch the category data from the API. const { data: categoryData, isLoading: categoryIsLoading } useMany ICategory, HttpError ({ resource: categories, // Creates the array of ids. This will filter and fetch the category data for the relevant posts. ids: posts.map((item) item?.category?.id), queryOptions: { // Set to true only if the posts array is not empty. enabled: !!posts.length, }, }); if (tableQueryResult?.isLoading) { return divLoading.../div; } return ( div h1Posts/h1 table thead tr thID/th thTitle/th thStatus/th thCreated At/th thCategory/th /tr /thead tbody {posts.map((post) ( tr key{post.id} td{post.id}/td td{post.title}/td td{post.status}/td td{new Date(post.createdAt).toDateString()}/td td {categoryIsLoading ? loading... : // Gets the title of the category from the categoryData object, which is the result of the useMany hook. categoryData?.data.find( (item) item.id post.category.id, )?.title || -} /td /tr ))} /tbody /table /div ); };官方 live preview 的入口部分注册资源并渲染演示组件在文档站中通过setRefineProps把PostList挂到resources: [{ name: posts, list: PostList }]上最终渲染RefineHeadlessDemo /这些是文档站自身的脚手架调用实际项目里只需把PostList作为posts资源的list组件注册到Refine即可。逐段拆解这个组合模式的四个关键点1. 先用 useTable 拿到当前页数据const { tableQueryResult } useTableIPost, HttpError(); const posts tableQueryResult?.data?.data ?? [];v3 中useTable内部通过useList完成请求见 useTable 文档返回tableQueryResultTanStack Query 的useQuery结果。这里把data兜底为空数组保证后续posts.map在请求未回来时不会报错。2. ids从当前页记录中提取外键集合ids: posts.map((item) item?.category?.id)useMany只接受两个核心入参resource与ids见 useMany 文档。把当前页所有行的category.id收集成数组传入意味着只请求本页需要的分类——翻页或过滤后ids变化useMany会触发新一轮请求关联数据始终与表格数据保持同步。3. queryOptions.enabled空列表时跳过请求queryOptions: { enabled: !!posts.length, }这是示例里容易忽略但很实用的细节当posts为空比如过滤条件命中 0 条记录时ids是一个空数组此时让查询处于 disabled 状态避免发出无意义的GET categories请求。从源码结构看这一机制在useMany内部有双重保障。useMany 实现 中查询默认以enabled: hasIds hasResource开启随后...queryOptions展开允许业务侧覆盖enabled。也就是说官方示例的enabled: !!posts.length正是利用queryOptions覆盖默认行为。4. 渲染loading 态 find 映射 兜底值{categoryIsLoading ? loading... : categoryData?.data.find((item) item.id post.category.id)?.title || -}关联数据与主数据是两条独立的查询链加载时机不同主表格等待tableQueryResult.isLoading分类列等待categoryIsLoading。渲染时对每个 post 在categoryData.data中按id post.category.id查找标题找不到时回退为-避免脏外键导致整列崩溃。源码视角useMany 是怎么工作的示例之所以可以放心地翻页后自动重新拉取根因在 useMany 的源码查询键queryKey包含 idskeys().data(pickedDataProvider).resource(identifier).action(many).ids(...(ids ?? [])).params(...).get()useMany.ts#L176-L189。ids 变化会生成新 queryKey从而触发新请求相同 ids 则命中 TanStack Query 缓存翻页回原页时基本零成本。优先走 dataProvider 的getManyqueryFn内先判断if (getMany)调用getMany({ resource, ids, meta })useMany.ts#L196-L201。无getMany时降级为逐个getOne若 dataProvider 未实现getManyuseMany会用handleMultiple对每个 id 并发调用getOneuseMany.ts#L203-L211。这与 useMany 文档中的 caution 一致能批量取就不要一条一条取建议在 dataProvider 中实现getMany。返回值结构返回{ query, result }其中result.data是数组无数据时回退为冻结空数组useMany.ts#L261-L267因此前端可以放心地直接.find。实时订阅Hook 挂载时还会调用useResourceSubscription向 LiveProvider 订阅resources/{resource}频道useMany.ts#L157-L174配置了 LiveProvider 的分类数据更新同样可以实时刷新。版本提示v3 与新版返回结构差异本文示例严格对应 v3pankod/refine-core的 APIuseTable返回tableQueryResult示例中以tableQueryResult?.data?.data读取行数组。需要说明的是仓库当前主版本v4/v5包名refinedev/core对 Hook 返回值做了重命名从 当前 useMany 源码 可以确认新版useMany返回query与resultresult.data为数组而新版useTable文档将对应返回项标记为tableQuery/result参见 新版 useTable 文档。如果你在维护 v5 项目useTable 提取 ids → useMany 批量拉取关联 → find 映射渲染的整体模式完全一致只需按新版返回结构调整取数字段即可。适用边界与小结适用关联记录数量有限、且后端没有提供聚合/JOIN 端点时前端批量映射是低成本方案queryOptions.enabled 缓存键机制保证了空列表不发请求、重复 ids 不重复请求。边界useMany的ids规模受限于单页记录数本例默认pageSize为 10所以该模式天然与分页配合良好若单页数据量很大应从后端聚合端点解决而不是继续放大ids数组。一句话总结useTable负责当前页主数据 排序/过滤/分页状态useMany负责按外键 id 批量补齐关联数据两者通过posts.map((item) item?.category?.id)这一行代码衔接是 Refine 处理列表页关联展示的标准姿势。延伸阅读仓库内路径useTable v3 文档FAQ 来源页useMany v3 文档useMany 源码实现useTable 关联数据示例原文【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
