用途:把 UI 连接到 API 或数据源,使用仓库既有的数据工具,确保输入输出有类型、UI 状态处理正确、缓存与失效行为明确。
主要能力:通过仓库工具(React Query、SWR 或自定义方案)接入数据调用;产出符合仓库模式的 hook、loader 或数据模块;覆盖 loading、error、empty、success 四种 UI 状态;定义稳定的缓存键策略,并写明失效与重新获取规则(以代码注释或辅助常量表达)。
使用方式:先识别仓库的数据获取模式(优先读取 <repo>/REPO_PROFILE.json);按既有客户端约定实现数据调用;根据请求输入派生稳定缓存键;为变更操作添加失效规则,避免不必要的全局失效;实现各 UI 状态(loading 用骨架屏或加载指示,error 提供可恢复提示与重试路径,empty 显示明确无数据状态,success 正常渲染);最后按仓库配置运行类型检查、lint 与测试。
输入:数据源定义(端点契约、客户端函数签名或数据描述)、需要数据的 UI 入口、预期行为(读或写、轮询或实时、是否允许乐观更新)、仓库配置。
适用场景:前端页面或组件需要从后端获取或写入数据,且希望统一状态处理与缓存策略时。
限制:不改变后端行为或契约;不在客户端添加超出展示与基础表单校验的业务规则;除非明确要求,不新建数据层抽象。若数据工具不明确,需先确认使用哪种方案及默认缓存预期;缓存过期应修正键与失效规则,避免临时重取循环;竞态需加最新请求守卫、取消或稳定请求标识;契约不清晰时建议先更新 API 契约或共享 schema 类型。