用途:在涉及数据变更的全栈应用中实现乐观 UI,使新增、删除、排序、字段更新、开关切换等操作在界面上立即生效,同时妥善处理失败回滚与用户提示。
主要能力:区分并设计三种失败模式——网络错误(提示错误并恢复条目、提供重试)、服务端拒绝(如 409、422,需展示服务端错误信息)、竞态条件(取消或排队,不合并过期响应)。以 React Query 为主给出核心写法:在 onMutate 中先 await queryClient.cancelQueries 取消进行中的重新获取,再用 getQueryData 快照当前状态,然后用 setQueryData 写入带临时 ID 的乐观条目,并把快照作为 context 返回;onError 中用快照回滚;onSettled 中无论成败都 invalidateQueries,以真实 ID 替换临时 ID。临时 ID 使用带前缀的 crypto.randomUUID(),不用 Date.now() 或自增整数,并在类型中标记 _optimistic 以便渲染待定状态。删除场景改为标记 _deleting 而非直接移除,回滚时配以解释性提示。竞态场景可用 debounce 包装实际 API 调用(界面仍即时更新),或在 onMutate 中取消上一个在途请求。错误反馈按场景选择内联(可原地修复的表单校验)或 toast(网络错误、409、500),并通过自定义 ApiError 透传服务端消息而非通用文案。文件还给出 tRPC 变体:用 useUtils() 访问缓存,调用 utils.items.list.cancel()、getData()、setData() 与 invalidate()。
适用场景:使用 React Query、SWR、RTK Query、tRPC 或本地状态的 React 全栈项目,需要在增删改查与高频交互中保持界面响应感。
限制:资料未提供安装命令、版本要求与许可信息;文中代码为模式示例,需按实际数据层调整;作者未给出针对其它框架的具体实现步骤。