Normy精准缓存失效指南getDependentQueries帮你只刷新真正需要更新的查询【免费下载链接】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你是否受够了修改一个对象后不得不猜测该刷新哪些查询Normy是一款面向 react-query、SWR、RTK Query、tRPC 等数据请求库的自动归一化与缓存更新库其中的getDependentQueries方法可以回答一个关键问题哪些查询真正持有这条数据拿到答案后你就能精准失效缓存只刷新真正需要更新的查询避免invalidateQueries前缀匹配带来的误伤和多余请求。缓存失效的常见痛点为什么全量刷新不是好答案用过 react-query 的朋友大概都有这样的经历用invalidateQueries([books])前缀匹配结果把[books]、[book, 1]、[books, search]一锅端触发一堆并不需要的重新请求手动维护setQueryBuilder/invalidateQueries列表查询一多就漏、就错明明只改了一个字段整个列表页、详情页、侧边栏集体转圈。问题本质是缓存是分散的但你不知道数据和查询之间的对应关系。Normy 恰好补上了这一块。核心原理一张数据 → 查询的依赖地图Normy 在归一化缓存中维护一张依赖映射表每个按id归一化的对象都记录着当前有哪些查询引用了我。每当查询新增、数据更新或被移除这张表都会自动同步维护对应源码packages/normy/src/add-or-remove-dependencies.ts与packages/normy/src/get-queries-dependent-on-mutation.ts。于是getDependentQueries的工作方式非常简单把你传入的任意数据一个对象、嵌套对象、甚至整个响应体归一化提取出其中所有可归一化对象的id查表返回所有引用这些对象的查询键列表去重后。它不会改动任何缓存纯粹是查地图可以随查随用。最快上手两步拿到依赖查询列表只要你的应用已经接入了 Normy例如通过QueryNormalizerProvider包裹 react-query在组件里拿到useQueryNormalizer即可const queryNormalizer useQueryNormalizer(); // 传入任意包含 id 的数据拿到所有持有它的查询键 const keys queryNormalizer.getDependentQueries({ id: 1, name: x, nested: { id: 2 }, }); // 例如 [[books], [book, 1], [book, 2]]拿到列表后就可以用 react-query 原生 API 精确操作queryClient.invalidateQueries({ queryKey: keys[0] }); // 或者逐个精准失效 / 中止请求官方示例里也有一个现成的演示按钮点击后会把持有 book 1 的所有查询打印到控制台可以直接运行体验examples/react-query/src/components/app.jsx。批量查询键getDependentQueriesByIds如果你手上只有id列表比如来自一条 WebSocket 消息用户 3、5 改名了直接用兄弟方法更方便它跳过数据解析这一步const keys queryNormalizer.getDependentQueriesByIds([3, 5]);这和传入数据对象的效果等价适合只拿到 id的场景。精准失效的优势比 invalidateQueries 前缀匹配更聪明方式行为风险invalidateQueries([books])前缀匹配刷新所有匹配前缀的查询误伤无关查询多余请求手动维护刷新列表逐个指定查询键查询多了必然遗漏、难以维护Normy getDependentQueries按数据实际归属返回查询键只刷新真正用到该数据的查询一个直观的例子你只更新了 id 为1的书的书名列表里还有 id 为2、3的书。getDependentQueries只会返回真正包含这本书的查询其余查询纹丝不动——刷新范围 数据实际影响范围。底层实现一览依赖表是怎么维护的每次查询数据进入归一化缓存时createNormalizer会计算该查询新引入、新移除了哪些对象依赖并更新dependentQueries映射见packages/normy/src/create-normalizer.ts查询从缓存移除时Normy 会同步清理依赖记录不再被任何查询引用的对象也会被自动垃圾回收内存不会越用越大getDependentQueries本身是纯查询操作实现见packages/normy/src/get-queries-dependent-on-mutation.ts只做查表与去重开销极低。相关模块路径方便深入源码核心逻辑packages/normy/src/create-normalizer.ts依赖表维护packages/normy/src/add-or-remove-dependencies.tsreact-query 集成packages/normy-react-query/src/create-query-normalizer.ts可运行示例examples/react-query/src/components/app.jsx、examples/trpc/、examples/swr/、examples/rtk-query/适用场景与前提条件典型场景想失效重取而不是内存内自动更新比如数据在别处被修改内存更新不可靠需要中止abort所有正在请求这条数据的 pending 请求WebSocket / 通知推送告诉了你哪些 id 变了需要定向刷新大型应用中查询数量多人工维护失效清单已经不可行。前提条件和 Normy 自动更新一致对象有统一的标识字段通常是id也可以自定义如_idid在全应用范围内唯一跨实体类型也唯一GraphQL 可拼上_typename同一id的对象在不同接口返回中结构一致。满足这三点getDependentQueries就能帮你把刷新哪些查询这件头疼事变成一次查表。常见问题FAQQgetDependentQueries 会修改缓存吗A不会。它只是查询依赖表返回查询键数组可以放心在任何时机调用。Q返回的查询键能直接用于 invalidateQueries 吗A可以。react-query 集成下返回的就是QueryKey格式数组直接传给queryClient.invalidateQueries({ queryKey })即可。Q某些数据没有 id还能用吗A无id的对象不会被归一化自然也不在依赖表里。这类数据仍按原有方式手动管理缓存。Q归一化影响性能吗ANormy 内置了结构共享structural sharing、变更检测等优化官方建议不要关闭 react-query 的 structuralSharing超大数据集还可以按查询/按变更单独关闭归一化。Q除了 react-query还支持哪些库A官方提供 react-query、SWR、RTK Query 三套集成tRPC 可通过 react-query 集成接入其他库可以基于normy/core自行封装。总结Normy 的getDependentQueries把数据在哪些查询里这个模糊问题变成了确定性的查表操作传入数据或 id 列表返回精准的去重查询键再交给 react-query 原生 API 做失效、重取或中止。配合 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），仅供参考