Normy快速上手：5分钟搞定React Query数据自动规范化与缓存自动更新

Normy快速上手5分钟搞定React Query数据自动规范化与缓存自动更新【免费下载链接】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 等数据获取库设计。它能把你的应用数据按 id 自动规范化存储并在 mutation 成功后自动更新所有相关缓存让你彻底告别手写setQueryData的繁琐逻辑。一、Normy 是什么解决什么痛点 如果你用过 React Query一定熟悉这样的场景用户编辑了一本书的名字你需要手动更新书籍列表查询再手动更新书籍详情查询。查询越多这段onSuccess代码就越长而且你必须清楚知道哪些查询需要被更新。Normy 就是来解决这个问题的自动规范化所有带id字段的对象无论嵌套多深都会按 id 存入一个全局的规范化存储中自动缓存更新mutation 返回{ id: 1, name: 新名字 }时Normy 会自动找出所有包含id: 1的查询并同步更新它们多库支持官方已提供 React Query、SWR、RTK Query 的集成核心逻辑位于packages/normy/目录基于它的normy/core还可以轻松扩展其他库简单说数据改一处缓存处处同步。二、5分钟快速上手React Query 数据规范化三步走第 1 步安装 npm 包npm install normy/react-query 最新版支持 React Query 5 和 tRPC 11如果你还在用旧版本 React Query需要安装normy/react-query0.10.2。normy/core会作为依赖自动安装无需手动处理。第 2 步用 Provider 包裹应用只需在QueryClientProvider外层再套一层QueryNormalizerProvider并传入queryClientQueryNormalizerProvider queryClient{queryClient} QueryClientProvider client{queryClient} App / /QueryClientProvider /QueryNormalizerProvider第 3 步删除手动的 onSuccess 更新代码从此 mutation 不再需要写queryClient.setQueryData(...)——Normy 会自动完成规范化存储的合并和所有依赖查询的刷新。整个 React Query 集成实现非常轻薄核心只有两个文件Provider 封装 和 normalizer 创建逻辑。三、缓存自动更新的原理3个前提条件Normy 的自动更新基于id 追踪机制内部实现可参考 create-normalizer.ts、normalize.ts 和 denormalize.ts。要让它正常工作你的数据需满足 3 个条件#条件说明1有标准化的标识字段通常是id若用_id可通过getNormalizationObjectKey: obj obj._id自定义2id 在全应用范围内唯一若 id 只在同类型对象内唯一可拼接类型后缀如obj.id obj.type3相同 id 的对象结构一致同一个书在 A 查询里叫title在 B 查询里不能叫name只要满足这些任何嵌套层级的对象都会被规范化——父对象中只保留对子对象的引用子对象独立存储这也是它能跨查询同步更新的根本原因。四、什么时候仍需手动更新⚠️ 诚实说明顶层数组的新增/删除/排序仍需手动处理。比如删除一本书Normy 无法知道你要从哪个查询的列表中移除它新增一本书它也不知道该插入到哪个列表、哪个位置。但数组内部对象的更新仍然是自动的——例如书籍的likedByUsers列表整体变更会正常自动同步。五、进阶技巧调试、手动更新与性能优化开发调试给normalizerConfig传入devLogging: true控制台会打印每次查询的规范化明细生产环境自动关闭✋手动更新缓存收到 WebSocket 事件时可用useQueryNormalizer()的setNormalizedData({ id: 1, name: 新名字 })一键同步所有相关查询⚡按需规范化数据量极大或不需更新的查询可用meta: { normalize: false }单独关闭性能友好Normy 内置了结构性共享structural sharing优化——若重新请求的数据与现有缓存完全一致会跳过规范化相同 id 的数据若无实际变化也不会触发查询更新六、动手体验运行官方示例仓库自带 4 个可运行的示例项目位于examples/目录分别演示了 react-query、swr、rtk-query 和 trpc 的完整用法其中 examples/react-query/src/components/app.jsx 是一个带书籍列表、编辑、新增功能的完整 Demo非常适合上手研究。git clone https://gitcode.com/gh_mirrors/no/normy cd normy/examples/react-query npm install npm start打开localhost:3000试着修改一本书的名字你会看到列表和详情页的缓存被自动同步更新——这就是 Normy 的魔力。✨总结如果你的项目中 React Query 查询众多、mutation 后手动维护缓存的代码让你头疼Normy 用一行 Provider 包裹就能换来数据改一处、缓存处处同步的清爽体验。5 分钟接入代码量立省一大截。【免费下载链接】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），仅供参考