Refine 中使用 useDeleteMany 实现表格多选批量删除Material UI DataGrid 实战指南【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineuseDeleteMany是 Refine 核心数据钩子data hook家族中的一员用于一次删除数据库中的多条记录。本文以 Refine v5 官方示例 table-material-ui-use-delete-many 为实战蓝本完整演示如何基于 Material UI 的DataGrid构建勾选多行 → 一键删除的批量删除交互并深入refinedev/core源码剖析其底层实现原理、参数体系、缓存失效与实时更新机制。读完本文你将能够在自己的 Refine 应用中独立实现安全、可扩展的多选批量删除功能。一、为什么需要 useDeleteMany在管理后台与内部工具中批量删除是最常见的高频操作之一运营需要清理过期数据、管理员需要一次性移除多条脏记录。如果逐条调用删除接口不仅产生大量网络请求还会让用户体验碎片化——这正是useDeleteMany存在的意义。面向批量接收resource与ids数组一次触发多条记录的删除底层复用它是 TanStack QueryuseMutation的扩展版本继承useMutation的全部能力并叠加 Refine 的 notification、invalidation、realtime、audit log 等特性优雅降级若当前 data provider 未实现deleteMany方法Refine 会自动退化为逐条调用deleteOne保证功能可用。需要说明的是退化方案会为每个 id 依次发起请求官方文档 明确不推荐长期依赖该行为建议在 data provider 中实现原生deleteMany方法。二、示例整体概览从工程到页面2.1 示例工程结构示例位于 examples/table-material-ui-use-delete-many核心代码结构如下examples/table-material-ui-use-delete-many/ ├── src/ │ ├── App.tsx # Refine 根组件数据源、路由、资源注册 │ ├── interfaces/index.d.ts # IPost、ICategory 等类型定义 │ └── pages/posts/ │ ├── index.tsx # 页面导出 │ └── list.tsx # 核心PostList 列表页批量删除交互 ├── package.json └── vite.config.ts2.2 根组件配置App.tsx 中示例通过refinedev/simple-rest连接假 REST APIhttps://api.fake-rest.refine.dev并注册posts资源const API_URL https://api.fake-rest.refine.dev; Refine routerProvider{routerProvider} dataProvider{dataProvider(API_URL)} notificationProvider{useNotificationProvider} resources{[{ name: posts, list: /posts }]} options{{ syncWithLocation: true, warnWhenUnsavedChanges: true }} {/* /posts 路由渲染 PostList */} /Refine这里notificationProvider{useNotificationProvider}是批量删除成功/失败提示能够弹出的前提——它来自refinedev/mui内部基于 MUI 的 Snackbar。三、核心实现DataGrid useDeleteMany 批量删除3.1 状态管理记录选中的行在 list.tsx 中选中的行 id 以GridRowSelectionModel形式保存在useState中const [selectedRowKeys, setSelectedRowKeys] React.useStateGridRowSelectionModel({ type: include, ids: new Set() }); const selectedIds Array.from(selectedRowKeys.ids); const hasSelected selectedIds.length 0;这是 MUI X DataGrid 新版v7的rowSelectionModel结构{ type: include, ids: Set }。hasSelected用于控制删除按钮的禁用态。3.2 调用 useDeleteMany 发起批量删除const { mutate } useDeleteManyIPost(); const deleteSelectedItems () { mutate( { resource: posts, ids: selectedIds.map(String), }, { onSuccess: () { setSelectedRowKeys({ type: include, ids: new Set() }); }, }, ); };要点mutate的第一个参数是Mutation Parametersresource指定资源名ids是要删除的记录 id 数组示例将其转为字符串兼容BaseKey第二个参数是 TanStack QueryuseMutation的选项示例在onSuccess中清空选中状态不要在mutationOptions中传onSuccess/onError——它们会覆盖 Refine 内部的默认处理详见下文源码分析如需自定义请像本例一样传给mutate。3.3 列表渲染与选择联动页面用useDataGrid拉取posts数据并注入DataGridconst { dataGridProps } useDataGridIPost({ pagination: { pageSize: 10 } }); DataGrid {...dataGridProps} columns{columns} checkboxSelection onRowSelectionModelChange{(newSelectionModel) setSelectedRowKeys(newSelectionModel)} pageSizeOptions{[10, 20, 50, 100]} rowSelectionModel{selectedRowKeys} /checkboxSelection开启行复选框rowSelectionModel受控绑定选中状态onRowSelectionModelChange回写状态。批量删除按钮放在List headerButtons中Button iddelete-selected onClick{deleteSelectedItems} disabled{!hasSelected} sizesmall variantcontained colorerror Delete Selected /Button未选中任何行时按钮自动禁用避免空操作。3.4 数据列定义示例还演示了通过useSelect加载categories并将类别显示为单选项、通过renderCell把category.id渲染为类别名称的常见做法属于 MUI DataGrid 通用技巧读者可结合 list.tsx 对照学习。四、运行与验证4.1 本地运行npm create refine-applatest -- --example table-material-ui-use-delete-many4.2 E2E 测试验证仓库提供了对应的 Cypress 测试 cypress/e2e/table-material-ui-use-delete-many/all.cy.ts覆盖了三个关键行为可当作验收标准全选点击表头复选框所有行的复选框均应变为Mui-checked禁用态未选中任何行时#delete-selected按钮应为 disabled批量删除勾选前两行后点击删除按钮应依次发出两次deletePost网络请求对应两条记录分别被删除。这验证了示例中删除是逐 id 请求的交互效果也侧面印证了deleteMany的 API 语义取决于 data provider 的实现见下一节。五、源码级原理useDeleteMany 的完整生命周期示例的 API 使用只是冰山一角。要真正掌握useDeleteMany需要理解它在 packages/core/src/hooks/data/useDeleteMany.ts 中的实现。5.1 dataProvider 选择与 deleteMany/deleteOne 分支mutationFn内部首先通过useDataProvider与pickDataProvider解析出目标 data provider然后执行核心分支const mutationFn () { if (selectedDataProvider.deleteMany) { return selectedDataProvider.deleteManyTData, TVariables({ resource: resource.name, ids, meta: combinedMeta, variables: values, }); } return handleMultiple( ids.map((id) selectedDataProvider.deleteOneTData, TVariables({ resource: resource.name, id, meta: combinedMeta, variables: values, }), ), ); };这段代码证实了文档中的降级逻辑provider 有deleteMany就走批量没有则用handleMultiple并发/顺序执行多次deleteOne。值得注意的是refinedev/simple-rest的 data provider 有意将deleteMany从实现中排除见 provider.ts 的类型签名OmitRequiredDataProvider, createMany | updateMany | deleteMany因此示例实际走的是逐条deleteOne路径——这正是 Cypress 测试断言发出两次deletePost请求的原因。5.2 乐观更新与回滚onMutate阶段会根据mutationMode决定是否进行乐观更新对list查询将已删除 id 从previous.data中过滤并修正total对many查询同样过滤已删除记录对one查询若缓存记录的 id 属于待删除集合则置为null。onError阶段若携带 context会把previousQueries逐一写回缓存setQueryData实现失败回滚。5.3 缓存失效InvalidationonSettled中默认以invalidates [list, many]调用invalidateStore——也就是说删除成功后同一资源下使用useList、useMany的页面会自动重新拉取数据。可通过invalidates参数扩展为[list, many, detail]或传入false完全禁用。5.4 通知、实时发布与审计日志onSuccess中依次完成从查询缓存移除被删记录的one查询调用handleNotification弹出Successfully deleted ...成功提示若配置了 live provider调用publish向resources/{resource}频道发布type: deleted事件若配置了 audit log provider调用log?.mutate记录action: deleteMany。onError中则通过checkError触发 auth provider 的onError检查并弹出错误通知。5.5 mutationMode 与 undoable 队列当mutationMode undoable时删除不会立即执行而是通过notificationDispatch把任务加入 undoable 队列等待undoableTimeout默认 5000ms倒计时若用户点击撤销则cancelMutation直接以mutationCancelled拒绝 PromiseonError中会跳过错误通知err.message ! mutationCancelled判断。六、Mutation 参数速查表结合 官方 API 文档 与源码类型定义useDeleteMany.tsmutate支持以下参数属性说明类型默认值resource资源名用于定位 data provider 方法与 API 路径string必填ids要删除的记录 id 数组BaseKey[]必填mutationMode变更执行时机pessimistic/optimistic/undoableMutationModepessimisticundoableTimeoutundoable模式下执行前的等待时长number5000msonCancel自定义undoable模式下的取消逻辑(cancelMutation) void—successNotification自定义成功通知函数或配置对象SuccessErrorNotificationSuccessfully deleted ...errorNotification自定义失败通知SuccessErrorNotificationError when updating ...meta透传给 data provider 的附加信息如 headers、GraphQL 查询MetaQuery{}dataProviderName多 data provider 场景下指定目标stringdefaultinvalidates成功后要失效的查询类型all/resourceAll/list/many/detail/false[list, many]其中mutationMode、undoableTimeout、invalidates等参数同样可以在Refine组件上全局配置hook 级传入的值会覆盖全局默认值。// 自定义 undoable 删除倒计时 10 秒并提供手动取消 const { mutate } useDeleteMany(); const cancelRef useRef(() void) | null(null); mutate({ resource: posts, ids: [1, 2, 3], mutationMode: undoable, undoableTimeout: 10000, onCancel: (cancelMutation) { cancelRef.current cancelMutation; }, });七、进阶实践建议实现原生deleteMany如 官方文档 强调在自建 data provider 中实现deleteMany例如批量DELETE /posts?ids1,2,3或循环请求后聚合结果避免逐条deleteOne的网络开销通过meta传递附加信息meta会被原样透传给deleteMany可用于携带请求头、指定 GraphQL 操作或区分多租户上下文参考 数据钩子速查合理配置invalidates若删除后需要刷新详情页记得把detail加入失效列表用好 undoable 模式对高风险批量操作undoableonCancel能显著降低误删成本配合审计日志与实时功能启用 audit log 与 live provider 后批量删除会自动记录审计事件并向订阅者广播deleted事件多端数据保持一致。总结本文以 Refine v5 官方示例 table-material-ui-use-delete-many 为主线完整呈现了Material UI DataGrid 多选 useDeleteMany批量删除的标准实现并通过 packages/core/src/hooks/data/useDeleteMany.ts 源码剖析了删除动作背后的 data provider 选择、乐观更新、缓存失效、通知、实时发布与 undoable 队列机制。掌握这套模式后你可以快速将批量删除能力复用到任何 Refine 资源上并在需要时通过mutationMode、invalidates、meta等参数灵活调整行为。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考