SuperAPI AI 工具集

frontend-optimistic-mutations

前端与建站

查看项目

更新于 10-16 05:43

技能介绍

用途:为 React / React Native 应用使用查询或缓存层时的「写入路径」提供可移植、与框架无关的规范,处理乐观更新、失败回滚、幂等与缓存一致性,而非 UI 库或样式系统。它建立在 frontend-data-contracts(写入经由类型化客户端)与 frontend-architecture(mutation 放在 modules/{feature}/hooks/,用 key 工厂索引)之上。

主要能力:固定五拍生命周期——cancel(取消在途查询)→ snapshot(快照受影响缓存)→ patch(即时打补丁)→ 出错时逐字回滚→ settle(失效重取)。要求回滚恢复补丁前的精确快照而非重新推导;缓存同步移动,状态变更需同时修补详情缓存与所有含该实体的列表页;服务端状态只存在于查询缓存,不进入 Zustand/Redux;幂等键在表单初始化或首次意图时生成一次,网络重试重放原响应。

用法:高置信、低冲突写入(切换状态、点赞、标记已付、排序)可乐观处理;创建返回服务端 id/编号/总额的写入用 pending 后 setQueryData 从响应播种;破坏性或难逆写入先确认;用户暂看不到结果的写入用 pending + toast。读取可带退避重试,非幂等写入不自动重试,仅在有幂等键或网络错误(status 0)时重试,409 不重试。适配:TanStack Query 用 onMutate/onError/onSettled;RTK Query 用 onQueryStarted + patchResult.undo();SWR 用 mutate 的 rollbackOnError。

限制:仅在任务与上游来源及本地项目上下文明确匹配时使用;应用前须验证命令、生成代码、依赖、凭据与外部服务行为;示例不能替代环境专属测试、安全审查,破坏性或高成本操作需用户批准。安装命令:npx skills add <org>/<repo> --skill "frontend-optimistic-mutations"。