前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载useGetLockLive是 react-admin 企业版Enterprise Edition提供的实时数据 Hook用于在挂载时查询当前记录的锁状态并订阅lock/[resource]/[id]实时主题从而在其他用户获取或释放锁时自动刷新返回值。本文将基于仓库中的 useGetLockLive 官方文档含 docs_headless 版本结合锁数据格式、dataProvider方法契约以及配套 Hook/组件完整讲解该 Hook 的安装、用法、实时原理与实战场景帮助你在多用户后台中优雅实现记录被锁定、其他人不可编辑的协作保护。一、前置知识react-admin 的锁Lock机制在进入useGetLockLive之前需要先理解它背后的锁机制。react-admin 的实时套件ra-realtime提供了一套锁机制用于防止两个用户同时编辑同一条记录一个用户可以主动请求锁定某条记录或通过编辑该记录触发锁定记录被锁定时其他用户无法编辑锁释放后其他用户才能继续编辑。相关能力与使用场景在 Realtime.md 的 Locks 章节中有完整描述。Lock 数据结构根据 RealtimeDataProvider.md 的定义一条 lock 记录保存了被锁定的记录、锁定者的身份标识以及锁定时间典型结构如下{ resource: posts, recordId: 123, identity: julien, createdAt: 2023-01-02T21:36:35.133Z, }其中identity是字符串或数字类型的锁定者标识可以是用户名、用户 id甚至是认证令牌。dataProvider 的方法契约要支持锁功能含实时锁查询dataProvider必须额外实现 4 个方法见 RealtimeDataProvider.mdlock(resource, { id, identity, meta })获取锁unlock(resource, { id, identity, meta })释放锁getLock(resource, { id, meta })查询单条记录的锁状态getLocks(resource, { meta })查询某个资源的全部锁同时实时能力还要求dataProvider实现subscribe(topic, callback)、unsubscribe(topic, callback)和可选的publish(topic, event)方法。useGetLockLive的实时二字正是建立在getLock()拉取当前状态与subscribe()订阅后续变化这两类方法之上的。如果后端没有原生锁接口仓库还提供了addLocksMethodsBasedOnALockResource辅助函数将getLocks()翻译为getList(locks)、把lock()翻译为create(locks)用一个普通locks资源模拟完整的锁 API详见 RealtimeDataProvider.md。二、安装useGetLockLive属于企业版Enterprise EditionHook需要有效订阅并从企业版包中导入。根据仓库中的文档有以下两种包名写法分别来自 docs_headless 与 docs 两套文档npm install --save react-admin/ra-core-ee # 或 yarn add react-admin/ra-core-ee部分版本的文档中使用的是react-admin/ra-realtime包import { useGetLockLive } from react-admin/ra-realtime;两种写法对应企业版包的不同组织方式具体以你使用的企业版版本为准。需要强调的是该 Hook 的实现位于企业版包内本开源仓库react-admin 核心不包含其源码实现文档中仅公开了其行为契约与使用方式。三、基本用法useGetLockLive()在组件挂载时为当前记录调用dataProvider.getLock()并订阅lock/[resource]/[id]主题上的实时更新。这意味着当另一个用户在当前页面停留期间获取或释放了这条记录的锁返回值会自动更新无需手动刷新。最经典的用法是编写一个展示当前记录锁状态的组件。以下示例完整来自 useGetLockLive 文档import { useGetLockLive } from react-admin/ra-core-ee; import { useGetIdentity } from react-admin; const LockStatus () { const { data: lock } useGetLockLive(); const { identity } useGetIdentity(); if (!lock) return spanNo lock/span; if (lock.identity identity?.id) return spanLocked by you/span; return spanLocked by {lock.identity}/span; };逻辑拆解useGetLockLive()返回与useGetLock类似的{ data, isLoading, ... }结构data即当前的 lock 对象结构与上文 Lock 数据格式一致useGetIdentity()是 react-admin 内置 Hook从authProvider.getIdentity()获取当前登录用户身份见 useGetIdentity 文档当data为null/undefined时说明记录当前未被锁定当lock.identity与当前用户 id 相等时说明锁由自己持有否则记录被其他用户锁定可以据此渲染锁定提示、禁用编辑按钮等。返回值useGetLockLive遵循 react-query 风格的返回结构常用字段包括data当前锁对象未锁定时为null或undefined包含identity、recordId、createdAt等字段isLoading/isPending首次加载中为truerefetch、error等标准 react-query 查询字段。四、上下文推断与显式参数useGetLockLive默认从上下文自动读取资源与记录信息resource从ResourceContext读取record id从RecordContext读取。因此在List、Edit、Show等由 react-admin 提供的页面组件内部直接调用useGetLockLive()即可自动锁定当前资源与当前记录无需任何参数。如果你不在ResourceContext/RecordContext上下文中例如在自定义页面、路由或工具函数组件中则需要显式传入这两个参数见 useGetLockLive 文档const { data: lock } useGetLockLive(posts, { id: 123 });第二个参数是与dataProvider.getLock()对应的params对象支持id记录 id如123meta可选一个会原样透传给dataProvider的附加元数据对象与 useGetLock 文档 中的参数约定一致。五、实时更新原理useGetLockLive与静态版useGetLock文档的最大区别在于实时二字。两者的行为对比如下维度useGetLockuseGetLockLive数据获取挂载时调用dataProvider.getLock()挂载时调用dataProvider.getLock()订阅主题无lock/[resource]/[id]状态更新仅在重新挂载/refetch 时更新其他用户获取或释放锁时自动更新适用场景一次性读取锁状态需要在页面上持续反映锁状态变化其底层工作流程可以概括为三个步骤挂载拉取调用dataProvider.getLock(resource, { id, meta })拿到当前锁状态作为初始值订阅主题通过dataProvider.subscribe(lock/posts/123, callback)订阅该记录专属的实时主题。主题命名规律为lock/[resource]/[id]例如资源posts、记录123对应lock/posts/123推送刷新其他用户通过dataProvider.lock()或unlock()变更锁状态时实时总线向该主题发布事件Hook 收到通知后重新查询或直接以事件数据更新data。正是因为订阅粒度为单条记录lock/[resource]/[id]useGetLockLive特别适合用在编辑页、详情页这类聚焦一条记录的场景。而如果要实时展示整个列表的锁状态则应使用订阅lock/[resource]主题的useGetLocksLive该 Hook 调用dataProvider.getLocks()并在挂载时订阅lock/[resource]用法见对应文档。六、实战场景场景一编辑页工具栏中的锁状态展示与保存控制将useGetLockLive与自定义Toolbar结合可以在其他用户锁定时禁用保存按钮避免冲突写入。参考 Realtime.md 中的思路该处展示了在表单中结合useGetLockLive与useLockOnCall的完整锁定流程核心逻辑如下const CustomToolbar () { const { identity } useGetIdentity(); const { data: lock } useGetLockLive(); const [doLock] useLockOnCall({ resource: tickets }); const isFormDisabled lock lock.identity ! identity?.id; return ( Toolbar SaveButton disabled{isFormDisabled} / {isFormDisabled ( span该记录被 {lock.identity} 锁定暂不可编辑/span )} /Toolbar ); };这里useGetLockLive()在Edit上下文中自动读取resource与record.id当锁属于其他用户时禁用保存按钮。若你的业务需要进入编辑页即自动抢锁、离开自动释放可配合useLockOnMountHook 或LockOnMount组件使用。场景二列表/详情页的锁标记如果你只需要在列表或详情中展示当前记录是否被锁定、被谁锁定的静态状态且不需要实时刷新可以直接使用静态版useGetLockimport { useGetLock } from react-admin/ra-realtime; const { data, isLoading } useGetLock(posts, { id: 123 });而需要实时感知整张列表的锁定变化时改用useGetLocksLive在DataTable中为每条记录渲染锁图标完整示例见 useGetLocksLive 文档。场景三开箱即用的锁状态组件如果不想手写 UI企业版还提供了现成的LockStatus组件可直观显示当前记录的锁状态是否锁定、是否由自己锁定并内置锁定/解锁操作。它支持hideWhenUnlocked、identity、resource、id、meta、lockMutationOptions、unlockMutationOptions、queryOptions等属性还允许通过ra-realtime.locks.status.locked_by_you、ra-realtime.locks.status.locked_by_another_user、ra-realtime.locks.status.unlocked三个 i18n key 自定义悬停提示文案。直接在自定义工具栏中放置LockStatus /即可const CustomToolbar () ( Toolbar SaveButton sx{{ mr: 1 }} / LockStatus / /Toolbar );七、锁相关 Hook 与组件速览react-admin 实时套件围绕锁机制提供了一组配套 Hook 与组件useGetLockLive是其中的只读 实时一环。完整清单见 Realtime.md名称类型作用文档useGetLockHook静态查询单条记录的锁useGetLock.mduseGetLockLiveHook实时查询单条记录的锁本文主题useGetLockLive.mduseGetLocksHook静态查询整个资源的锁集合useGetLocks.mduseGetLocksLiveHook实时查询整个资源的锁集合useGetLocksLive.mduseLock/useUnlockHook手动获取 / 释放锁useLock.md、useUnlock.mduseLockOnMountHook组件挂载时自动上锁、卸载时自动解锁useLockOnMount.mduseLockOnCallHook调用时触发上锁useLockOnCall.mdLockStatus组件展示锁状态并提供锁定/解锁操作LockStatus.mdLockOnMount组件useLockOnMount的组件版本LockOnMount.md选择建议只关心一条记录的锁且要求实时→useGetLockLive编辑页、详情页只关心一条记录的锁无需实时→useGetLock需要整个资源所有记录的锁→useGetLocks静态或useGetLocksLive实时列表页需要自动抢锁/释放锁→useLockOnMount/LockOnMount想要现成 UI→LockStatus。八、注意事项企业版限制useGetLockLive需要 Enterprise Edition 订阅开源版 react-admin 不提供该 Hook。使用前请确认项目已安装企业版包并具备有效订阅。身份来源判断锁是否由自己持有依赖useGetIdentity()其数据来自authProvider.getIdentity()。请确保你的 authProvider 正确实现了getIdentity()否则无法准确区分我锁定的与别人锁定的。实时能力依赖Hook 的实时性建立在dataProvider.subscribe()之上。如果数据提供者未接入实时总线如 Supabase、API Platform、Mercure 等后端订阅不会生效行为将退化为普通的静态查询。数据提供者的实时与锁方法要求可参考 RealtimeDataProvider.md 和 DataProviderLive.md。meta 透传需要向后端传递额外筛选或认证信息时通过第二参数{ id, meta }中的meta传入它会原样透传给dataProvider.getLock()。九、进一步阅读静态版锁查询useGetLock 文档资源级实时锁查询useGetLocksLive 文档实时与锁机制总览Realtime.mdLocks 章节、DataProviderLive.md锁数据格式与 dataProvider 契约RealtimeDataProvider.md配套组件与 HookLockStatus.md、LockOnMount.md、useLockOnMount.md、useLockOnCall.md数据获取指南中与锁相关的 dataProvider 方法说明DataFetchingGuide.md赞分享前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载相关推荐react-admin useGetOne 数据获取 Hook 完全指南从单条记录查询到查询合并与实时刷新react admin useGetOne 数据获取 Hook 完全指南从单条记录查询到查询合并与实时刷新 导读 useGetOne 是 react admi前端UI组件react-admin 实时锁机制useLockOnCall 手动触发记录锁 Hook 完整实战指南react admin 实时锁机制 useLockOnCall 手动触发记录锁 Hook 完整实战指南 useLockOnCall 是 react admin前端UI组件react-admin 实时订阅实战深入掌握 useSubscribeToRecord 单记录事件订阅 Hookreact admin 实时订阅实战深入掌握 useSubscribeToRecord 单记录事件订阅 Hook useSubscribeToRecord 是前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/21 14:37:20 · 阅读 1.2k react-admin 记录锁实时查询指南：useGetLockLive Hook 从入门到实战
前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载useGetLockLive是 react-admin 企业版Enterprise Edition提供的实时数据 Hook用于在挂载时查询当前记录的锁状态并订阅lock/[resource]/[id]实时主题从而在其他用户获取或释放锁时自动刷新返回值。本文将基于仓库中的 useGetLockLive 官方文档含 docs_headless 版本结合锁数据格式、dataProvider方法契约以及配套 Hook/组件完整讲解该 Hook 的安装、用法、实时原理与实战场景帮助你在多用户后台中优雅实现记录被锁定、其他人不可编辑的协作保护。一、前置知识react-admin 的锁Lock机制在进入useGetLockLive之前需要先理解它背后的锁机制。react-admin 的实时套件ra-realtime提供了一套锁机制用于防止两个用户同时编辑同一条记录一个用户可以主动请求锁定某条记录或通过编辑该记录触发锁定记录被锁定时其他用户无法编辑锁释放后其他用户才能继续编辑。相关能力与使用场景在 Realtime.md 的 Locks 章节中有完整描述。Lock 数据结构根据 RealtimeDataProvider.md 的定义一条 lock 记录保存了被锁定的记录、锁定者的身份标识以及锁定时间典型结构如下{ resource: posts, recordId: 123, identity: julien, createdAt: 2023-01-02T21:36:35.133Z, }其中identity是字符串或数字类型的锁定者标识可以是用户名、用户 id甚至是认证令牌。dataProvider 的方法契约要支持锁功能含实时锁查询dataProvider必须额外实现 4 个方法见 RealtimeDataProvider.mdlock(resource, { id, identity, meta })获取锁unlock(resource, { id, identity, meta })释放锁getLock(resource, { id, meta })查询单条记录的锁状态getLocks(resource, { meta })查询某个资源的全部锁同时实时能力还要求dataProvider实现subscribe(topic, callback)、unsubscribe(topic, callback)和可选的publish(topic, event)方法。useGetLockLive的实时二字正是建立在getLock()拉取当前状态与subscribe()订阅后续变化这两类方法之上的。如果后端没有原生锁接口仓库还提供了addLocksMethodsBasedOnALockResource辅助函数将getLocks()翻译为getList(locks)、把lock()翻译为create(locks)用一个普通locks资源模拟完整的锁 API详见 RealtimeDataProvider.md。二、安装useGetLockLive属于企业版Enterprise EditionHook需要有效订阅并从企业版包中导入。根据仓库中的文档有以下两种包名写法分别来自 docs_headless 与 docs 两套文档npm install --save react-admin/ra-core-ee # 或 yarn add react-admin/ra-core-ee部分版本的文档中使用的是react-admin/ra-realtime包import { useGetLockLive } from react-admin/ra-realtime;两种写法对应企业版包的不同组织方式具体以你使用的企业版版本为准。需要强调的是该 Hook 的实现位于企业版包内本开源仓库react-admin 核心不包含其源码实现文档中仅公开了其行为契约与使用方式。三、基本用法useGetLockLive()在组件挂载时为当前记录调用dataProvider.getLock()并订阅lock/[resource]/[id]主题上的实时更新。这意味着当另一个用户在当前页面停留期间获取或释放了这条记录的锁返回值会自动更新无需手动刷新。最经典的用法是编写一个展示当前记录锁状态的组件。以下示例完整来自 useGetLockLive 文档import { useGetLockLive } from react-admin/ra-core-ee; import { useGetIdentity } from react-admin; const LockStatus () { const { data: lock } useGetLockLive(); const { identity } useGetIdentity(); if (!lock) return spanNo lock/span; if (lock.identity identity?.id) return spanLocked by you/span; return spanLocked by {lock.identity}/span; };逻辑拆解useGetLockLive()返回与useGetLock类似的{ data, isLoading, ... }结构data即当前的 lock 对象结构与上文 Lock 数据格式一致useGetIdentity()是 react-admin 内置 Hook从authProvider.getIdentity()获取当前登录用户身份见 useGetIdentity 文档当data为null/undefined时说明记录当前未被锁定当lock.identity与当前用户 id 相等时说明锁由自己持有否则记录被其他用户锁定可以据此渲染锁定提示、禁用编辑按钮等。返回值useGetLockLive遵循 react-query 风格的返回结构常用字段包括data当前锁对象未锁定时为null或undefined包含identity、recordId、createdAt等字段isLoading/isPending首次加载中为truerefetch、error等标准 react-query 查询字段。四、上下文推断与显式参数useGetLockLive默认从上下文自动读取资源与记录信息resource从ResourceContext读取record id从RecordContext读取。因此在List、Edit、Show等由 react-admin 提供的页面组件内部直接调用useGetLockLive()即可自动锁定当前资源与当前记录无需任何参数。如果你不在ResourceContext/RecordContext上下文中例如在自定义页面、路由或工具函数组件中则需要显式传入这两个参数见 useGetLockLive 文档const { data: lock } useGetLockLive(posts, { id: 123 });第二个参数是与dataProvider.getLock()对应的params对象支持id记录 id如123meta可选一个会原样透传给dataProvider的附加元数据对象与 useGetLock 文档 中的参数约定一致。五、实时更新原理useGetLockLive与静态版useGetLock文档的最大区别在于实时二字。两者的行为对比如下维度useGetLockuseGetLockLive数据获取挂载时调用dataProvider.getLock()挂载时调用dataProvider.getLock()订阅主题无lock/[resource]/[id]状态更新仅在重新挂载/refetch 时更新其他用户获取或释放锁时自动更新适用场景一次性读取锁状态需要在页面上持续反映锁状态变化其底层工作流程可以概括为三个步骤挂载拉取调用dataProvider.getLock(resource, { id, meta })拿到当前锁状态作为初始值订阅主题通过dataProvider.subscribe(lock/posts/123, callback)订阅该记录专属的实时主题。主题命名规律为lock/[resource]/[id]例如资源posts、记录123对应lock/posts/123推送刷新其他用户通过dataProvider.lock()或unlock()变更锁状态时实时总线向该主题发布事件Hook 收到通知后重新查询或直接以事件数据更新data。正是因为订阅粒度为单条记录lock/[resource]/[id]useGetLockLive特别适合用在编辑页、详情页这类聚焦一条记录的场景。而如果要实时展示整个列表的锁状态则应使用订阅lock/[resource]主题的useGetLocksLive该 Hook 调用dataProvider.getLocks()并在挂载时订阅lock/[resource]用法见对应文档。六、实战场景场景一编辑页工具栏中的锁状态展示与保存控制将useGetLockLive与自定义Toolbar结合可以在其他用户锁定时禁用保存按钮避免冲突写入。参考 Realtime.md 中的思路该处展示了在表单中结合useGetLockLive与useLockOnCall的完整锁定流程核心逻辑如下const CustomToolbar () { const { identity } useGetIdentity(); const { data: lock } useGetLockLive(); const [doLock] useLockOnCall({ resource: tickets }); const isFormDisabled lock lock.identity ! identity?.id; return ( Toolbar SaveButton disabled{isFormDisabled} / {isFormDisabled ( span该记录被 {lock.identity} 锁定暂不可编辑/span )} /Toolbar ); };这里useGetLockLive()在Edit上下文中自动读取resource与record.id当锁属于其他用户时禁用保存按钮。若你的业务需要进入编辑页即自动抢锁、离开自动释放可配合useLockOnMountHook 或LockOnMount组件使用。场景二列表/详情页的锁标记如果你只需要在列表或详情中展示当前记录是否被锁定、被谁锁定的静态状态且不需要实时刷新可以直接使用静态版useGetLockimport { useGetLock } from react-admin/ra-realtime; const { data, isLoading } useGetLock(posts, { id: 123 });而需要实时感知整张列表的锁定变化时改用useGetLocksLive在DataTable中为每条记录渲染锁图标完整示例见 useGetLocksLive 文档。场景三开箱即用的锁状态组件如果不想手写 UI企业版还提供了现成的LockStatus组件可直观显示当前记录的锁状态是否锁定、是否由自己锁定并内置锁定/解锁操作。它支持hideWhenUnlocked、identity、resource、id、meta、lockMutationOptions、unlockMutationOptions、queryOptions等属性还允许通过ra-realtime.locks.status.locked_by_you、ra-realtime.locks.status.locked_by_another_user、ra-realtime.locks.status.unlocked三个 i18n key 自定义悬停提示文案。直接在自定义工具栏中放置LockStatus /即可const CustomToolbar () ( Toolbar SaveButton sx{{ mr: 1 }} / LockStatus / /Toolbar );七、锁相关 Hook 与组件速览react-admin 实时套件围绕锁机制提供了一组配套 Hook 与组件useGetLockLive是其中的只读 实时一环。完整清单见 Realtime.md名称类型作用文档useGetLockHook静态查询单条记录的锁useGetLock.mduseGetLockLiveHook实时查询单条记录的锁本文主题useGetLockLive.mduseGetLocksHook静态查询整个资源的锁集合useGetLocks.mduseGetLocksLiveHook实时查询整个资源的锁集合useGetLocksLive.mduseLock/useUnlockHook手动获取 / 释放锁useLock.md、useUnlock.mduseLockOnMountHook组件挂载时自动上锁、卸载时自动解锁useLockOnMount.mduseLockOnCallHook调用时触发上锁useLockOnCall.mdLockStatus组件展示锁状态并提供锁定/解锁操作LockStatus.mdLockOnMount组件useLockOnMount的组件版本LockOnMount.md选择建议只关心一条记录的锁且要求实时→useGetLockLive编辑页、详情页只关心一条记录的锁无需实时→useGetLock需要整个资源所有记录的锁→useGetLocks静态或useGetLocksLive实时列表页需要自动抢锁/释放锁→useLockOnMount/LockOnMount想要现成 UI→LockStatus。八、注意事项企业版限制useGetLockLive需要 Enterprise Edition 订阅开源版 react-admin 不提供该 Hook。使用前请确认项目已安装企业版包并具备有效订阅。身份来源判断锁是否由自己持有依赖useGetIdentity()其数据来自authProvider.getIdentity()。请确保你的 authProvider 正确实现了getIdentity()否则无法准确区分我锁定的与别人锁定的。实时能力依赖Hook 的实时性建立在dataProvider.subscribe()之上。如果数据提供者未接入实时总线如 Supabase、API Platform、Mercure 等后端订阅不会生效行为将退化为普通的静态查询。数据提供者的实时与锁方法要求可参考 RealtimeDataProvider.md 和 DataProviderLive.md。meta 透传需要向后端传递额外筛选或认证信息时通过第二参数{ id, meta }中的meta传入它会原样透传给dataProvider.getLock()。九、进一步阅读静态版锁查询useGetLock 文档资源级实时锁查询useGetLocksLive 文档实时与锁机制总览Realtime.mdLocks 章节、DataProviderLive.md锁数据格式与 dataProvider 契约RealtimeDataProvider.md配套组件与 HookLockStatus.md、LockOnMount.md、useLockOnMount.md、useLockOnCall.md数据获取指南中与锁相关的 dataProvider 方法说明DataFetchingGuide.md赞分享前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载相关推荐react-admin useGetOne 数据获取 Hook 完全指南从单条记录查询到查询合并与实时刷新react admin useGetOne 数据获取 Hook 完全指南从单条记录查询到查询合并与实时刷新 导读 useGetOne 是 react admi前端UI组件react-admin 实时锁机制useLockOnCall 手动触发记录锁 Hook 完整实战指南react admin 实时锁机制 useLockOnCall 手动触发记录锁 Hook 完整实战指南 useLockOnCall 是 react admin前端UI组件react-admin 实时订阅实战深入掌握 useSubscribeToRecord 单记录事件订阅 Hookreact admin 实时订阅实战深入掌握 useSubscribeToRecord 单记录事件订阅 Hook useSubscribeToRecord 是前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考