Refine Mantine RefreshButton 使用指南基于 useInvalidate 的刷新按钮完整解析【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine导读RefreshButton是 Refine 的 Mantine UI 集成refinedev/mantine中用于刷新页面数据的按钮组件它基于 Mantine 的Button组件构建并通过 Refine 核心的useInvalidateHook 触发数据失效与重新请求。本文以官方文档为主体结合仓库源码与测试用例完整讲解该组件的用法、recordItemId/resource/hideText等核心属性的行为细节、底层 Hook 的实现原理以及在 Show、Edit、List 等页面中的实战接入方式。组件定位与工作原理RefreshButton的官方定位非常明确使用 Mantine 的Button组件通过 Refine 核心的useInvalidateHook 更新页面上展示的数据。从源码实现来看Mantine 包中的RefreshButton是一个纯 UI 薄封装所有刷新什么、如何刷新的逻辑都委托给核心包的useRefreshButtonHookUI 层packages/mantine/src/components/buttons/refresh/index.tsx逻辑层packages/core/src/hooks/button/refresh-button/index.tsx其典型使用场景是放在Show、Edit页面的headerButtons中让用户一键重新拉取当前记录的详情数据。:::simple 提示该组件支持通过Refine CLI的 swizzle 功能生成到项目内进行定制文档中标注了swizzle: true具体操作可参考 Refine CLI 相关文档。:::基本用法在 Show 页面接入刷新按钮官方文档给出的最典型用法是将RefreshButton放入Show组件的headerButtons中与useShow配合刷新当前记录import { useShow } from refinedev/core; import { Show, MarkdownField, RefreshButton } from refinedev/mantine; import { Title, Text } from mantine/core; const PostShow: React.FC () { const { result: post, query } useShowIPost(); const { data, isLoading } query; return ( // 将 RefreshButton 渲染在页面头部按钮区 Show headerButtons{RefreshButton /} isLoading{isLoading} Title order{5}Id/Title Text mtsm{post?.id}/Text Title mtsm order{5} Title /Title Text mtsm{post?.title}/Text Title mtsm order{5} Content /Title MarkdownField value{post?.content} / /Show ); }; interface IPost { id: number; title: string; content: string; }在这个例子中useShowIPost()负责拉取当前路由如/posts/show/123对应的记录RefreshButton /默认从当前路由参数中读取 resource 与 record id点击按钮后Refine 使该记录的detail查询失效并重新请求页面数据随之更新。需要说明的是此示例需要 App 通过Refine组件注册posts资源并配置list、show路由且由路由提供者如 React Router渲染show/:id页面RefreshButton才能正确解析出 id。核心属性详解recordItemId指定要刷新的记录默认情况下RefreshButton会从路由参数中读取记录 id。当你需要刷新一条与当前路由无关的记录时可通过recordItemId显式指定import { RefreshButton } from refinedev/mantine; const MyRefreshComponent () { return RefreshButton recordItemId123 /; };点击该按钮后会触发useInvalidate然后重新获取resource 为 posts、id 为 123的那条记录resource 默认从当前路由解析得到。从核心 Hook 源码可见recordItemId最终作为id传给useResourceParamspackages/core/src/hooks/button/refresh-button/index.tsx再在点击时透传给useInvalidateconst onClick () { invalidates({ id, invalidates: [detail], dataProviderName: props.dataProviderName, resource: identifier, }); };resource指定要刷新的资源resource属性用于管理哪个资源的数据被刷新。默认从当前路由读取资源名但可以手动覆盖import { RefreshButton } from refinedev/mantine; const MyRefreshComponent () { return ( RefreshButton resourcecategories // 指定刷新 categories 资源 recordItemId2 / ); };点击后useInvalidate会获取resource 为 categories、id 为 2的记录。该用法同样需要categories资源已在Refine中注册例如配置了list: /categories。identifier处理同名资源的歧义当存在多个同名资源时可以传入identifier代替name来精确匹配。identifier只作为资源匹配的主键数据提供者的方法仍使用在Refine /组件中定义的name发起请求。这与 Refine 资源命名的通用规则一致详细说明可参考Refine /组件文档中的 identifier 章节。hideText仅显示图标hideText用于控制是否显示按钮文字。当设为true时只渲染刷新图标import { RefreshButton } from refinedev/mantine; const MyRefreshComponent () { return RefreshButton hideText recordItemId123 /; };从源码看hideText模式下组件不再渲染 MantineButton而是切换为ActionIcon图标按钮并使用mapButtonVariantToActionIconVariant将按钮 variant 映射为图标按钮适用的 variant同时保留aria-label以维持可访问性packages/mantine/src/components/buttons/refresh/index.tsxreturn hideText ? ( ActionIcon onClick{onClick ? onClick : onRefresh} loading{loading} aria-label{label} >const invalidate useCallback( ({ resource, dataProviderName, invalidates, id, invalidationFilters { type: all, refetchType: active }, invalidationOptions { cancelRefetch: false }, }: UseInvalidateProp) { // ... invalidates.map((key) { // 针对 detail / list / many / resourceAll 等 key 逐一分发 return queryClient.invalidateQueries({ ...invalidationFilters, ...invalidationOptions }); }); }, // ... );其中invalidationFilters默认{ type: all, refetchType: active }意味着只重新拉取当前活跃的查询cancelRefetch: false表示不取消正在进行的请求。这些默认值确保了刷新操作轻量、可控。useRefreshButton逻辑与状态的统一封装Mantine 的RefreshButton内部使用核心包的useRefreshButtonHookpackages/core/src/hooks/button/refresh-button/index.tsx它返回三样东西返回值说明onClick触发useInvalidate使详情查询失效并重新请求的点击处理函数label按钮文字默认翻译 key 为buttons.refresh兜底值为 Refreshloading布尔值表示当前资源详情查询是否正在请求中loading的判断非常巧妙——它不是按钮自己的状态而是通过 TanStack Query 的queryClient.isFetching()检查该资源action: one的查询键是否正在请求const loading !!queryClient.isFetching({ queryKey: keys() .data(pickDataProvider(identifier, props.dataProviderName, resources)) .resource(identifier) .action(one) .get(), });也就是说只要该资源的详情getOne查询正在进行无论是不是本按钮触发的按钮就会自动显示 Mantine 的加载态避免用户重复点击造成并发请求。测试用例如何验证这些行为仓库对这套行为有完整的测试覆盖分两层核心 Hook 层packages/core/src/hooks/button/refresh-button/index.spec.tsx 验证了默认 label 为 Refresh通过i18nProvider可把buttons.refresh翻译为自定义文本点击onClick会调用useInvalidate存在查询缓存时点击会先进入loading请求完成后自动退出且useOne返回的数据被更新为最新值如 Post 1 → Post 1 updated。组件层packages/mantine/src/components/buttons/refresh/index.spec.tsx 直接复用refinedev/ui-tests导出的buttonRefreshTests通用测试套件定义于 packages/ui-tests/src/tests/buttons/refresh.tsx对 Mantine 版本的按钮渲染与行为做一致性校验。在 List / Edit 等场景中的扩展思路虽然官方示例以 Show 页面为主但理解其实现后可以灵活扩展Edit 页面同样放入headerButtons点击后刷新当前编辑记录的详情配合useForm的queryResult实现放弃修改、拉取最新数据的效果List 页面结合hideText只显示图标放入表格工具条配合useList/useTable的查询键实现整表刷新注意内置逻辑默认只失效detail查询若需刷新列表可自定义onClick调用useInvalidate并传入invalidates: [list]自定义 onClick源码中的onClick ? onClick : onRefresh表明传入自定义onClick会完全接管点击行为适合在刷新前后插入额外逻辑如重置筛选、提示消息等。小结RefreshButton是 Refine Mantine 集成中UI 薄封装 核心逻辑复用设计哲学的典型代表UI 层只负责 MantineButton/ActionIcon的渲染与hideText、svgIconProps等展示细节而资源解析、详情查询失效、加载态判断全部由核心包useRefreshButtonuseInvalidate完成。配合recordItemId、resource、identifier三个属性开发者可以在任意页面精确控制刷新哪条记录的哪个资源再加上默认的loading防重复提交机制使其成为构建数据密集型后台界面时开箱即用的标准刷新入口。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考