Normy乐观更新实战用optimisticData与rollbackData实现UI即时响应和自动回滚【免费下载链接】normyAutomatic normalization and data updates for data fetching libraries (react-query, vue-query, trpc, swr, rtk-query and more)项目地址: https://gitcode.com/gh_mirrors/no/normyNormy 是一个面向数据获取库react-query、swr、rtk-query、trpc 等的数据自动归一化库。本文聚焦它的实战利器——乐观更新Optimistic Update通过optimisticData与rollbackData两个选项让 UI 在请求发出瞬间立即响应失败时又自动回滚到原数据全程无需手写缓存更新代码。为什么需要乐观更新想象一个改书名的按钮普通更新用户点击 → 等待服务器响应 → UI 才变化。网络慢时体验生硬乐观更新用户点击 → UI立刻变成新值 → 后台请求成功则维持失败则回滚。手动实现乐观更新很繁琐你要手动mutate每一个包含该数据的查询还要在失败时记得把每个查询都还原。查询一多代码又长又容易漏。这正是 Normy 解决的痛点。原理一次乐观数据更新所有相关查询 ⚡Normy 会把你应用里的查询数据按id自动归一化存储。当一次变更发生它只需知道哪个 id 的哪个字段变了就能自动找出所有引用了该对象的查询并同步更新。optimisticData就是提前告诉 Normy 即将发生的变化请求发出前Normy 用optimisticData更新归一化数据所有相关查询的 UI 立即刷新请求成功后服务端真实响应再走一次标准归一化流程UI 与服务器保持一致请求失败后rollbackData生效UI 自动恢复原状。SWR 集成一个完整示例先安装并挂载 Provider详见 packages/normy-swr/README.mdnpm install normy/swrconst updateBookNameMutation useNormalizedSWRMutation( mutation-key, async () Promise.resolve({ id: 1, name: Name updated }), { // 请求前UI 立刻显示新名字 optimisticData: { id: 1, name: Name updated }, // 失败时自动恢复旧名字 rollbackData: { id: 1, name: Name }, }, );就这么几行所有包含id: 1这本书的查询列表页、详情页……都会瞬间更新。核心实现逻辑在 useNormalizedSWRMutation.ts请求发起时触发乐观更新onError时触发回滚。react-query 集成放进 onMutate 的 context react-query 官方支持在onMutate返回 contextNormy 会订阅 MutationCache 自动读取useMutation({ mutationFn: async () ({ id: 1, name: Name 1 Updated }), onMutate: () ({ optimisticData: { id: 1, name: Name 1 Updated }, rollbackData: { id: 1, name: Name 1 }, }), });pending 状态触发乐观更新、error 状态触发回滚的监听代码位于 create-query-normalizer.ts完整文档见 packages/normy-react-query/README.md。实战技巧清单 rollbackData要存改之前的值从当前查询数据中取出旧值传入回滚才准确可加normalize: false避免重复工作如果你确定响应结构与optimisticData一致可以在 mutation 上设置normalize: false成功后不再重复归一化一次两个集成的文档都有示例嵌套对象同样有效optimisticData里的嵌套对象如author: { id, name }也会按 id 归一化一次更新联动多处顶层数组仍需手动处理往列表头部/尾部插入或删除元素这类结构变化Normy 无法判断插入位置仍需手动更新——这与它的定位一致只自动化按 id 的内容变更。动手体验跑一个官方示例 仓库内置了四种集成的可运行示例其中 SWR 示例演示了带 3 秒延迟的乐观改名 回滚git clone https://gitcode.com/gh_mirrors/no/normy关键文件SWR 乐观更新示例examples/swr/src/components/app.jsxreact-query 乐观更新示例examples/react-query/src/components/app.jsxtRPC 乐观更新示例examples/trpc/src/components/app.tsx小结选项触发时机作用optimisticData请求发出瞬间UI 立即呈现预期结果服务端响应请求成功按真实数据自动校正所有查询rollbackData请求失败自动回滚到原数据用 Normy即时响应 自动回滚从几十个缓存操作的手工活变成两行配置——这就是数据归一化带来的红利。【免费下载链接】normyAutomatic normalization and data updates for data fetching libraries (react-query, vue-query, trpc, swr, rtk-query and more)项目地址: https://gitcode.com/gh_mirrors/no/normy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考