工作学习笔记 —— 解决刷新缓存问题

一、问题描述

在我完成了单项关联字段拓展列的开发后，表单的缓存刷新会出现一些问题，直接把问题抛给AI解决AI的反映是不断的添加注释排查问题，或者猜测问题出现在哪，然后一顿乱改，所以首先我们需要自己去了解整个单项关联字段中的拓展列创建时的整天逻辑，然后去让AI排查问题出在哪里，过程中同样借助AI分析，更加准确有目的的去学习和理解AI开发。

拓展列功能指的是A表在关联了B表后，我需要能够通过拓展字段列的方式去展示出我需要的B表中被关联的内容，只做展示，不允许修改，这是一种优化用户前端体验的功能，不需要用户在两个表之间来回跳转，也可以看到被关联的表单对应行的字段内容，且哪些字段展示是有用户自己去进行配置的。

如下图，关联了俩行的内容，然后配置了名字和标签多选的拓展列，拓展列会把关联的两行对应字段的内容展示出来，而没有进行关联的用占位符 - 去占位表示。

二、业务逻辑层

当前创建扩展列的业务流程
- 前端用户行为
  - 用户在点击单项关联的字段配置时，可以看到"管理拓展列"的相关按钮，点击后打开管理面板，此时系统会先尝试从后端加载已有的拓展列配置（如果有）
  - 可以在该面板中设置多个字段的拓展列，也可以删除已存在的
  - 当配置好后点击"保存"，系统验证配置（字段名不能重复、必填项要填完）
  - 配置保存到关联字段的config中（extendedColumns数组中），注意此时还没有调用后端API，这些都是在前端完成操作
- 后端行为 ------ 保存关联字段、创建拓展字段列逻辑
  - 在用户点击完保存后，系统调用updateTableField保存关联字段
  - 保存成功后，系统检查关联字段的config中是否有extendedColumns
  - 当检测到extendedColumns且不为空时，系统准备调用后端API去创建拓展字段列
  - 后端调用createRelateExtendFields 接口创建对应字段列
    - 验证表是否存在、类型是否正确
    - 如果配置中有对应id（字段类型），则更新
    - 如果没有则创建新的字段列
    - 如果已有字段不在配置中则删除
    - 最后返回结果
- 前端刷新
  - 此时理论上后端的拓展列实际已经创建好了，前端需要刷新数据让用户可以看到新创建的拓展列以及数据
  - 系统调用getTableList获取最新的字段列表
  - 直接更新ReactQuery缓存（setQueryData）
  - 如果API调用失效，使用缓存刷新机制，先失效缓存（invalidateQueries），再重新获取（refetchQueries）
  - 失效其他的相关缓存，表格详情、视图数据等等，使用refetchType: 'none' 避免立即重新请求
  - 延迟刷新表格数据（延迟300ms执行），确保字段列表更新成功
  - 调用refreshExtendedColumns 函数，这里是全表刷新
  - 跳过普通的invalidateTableCaches 调用，避免重复刷新导致闪烁

业务流程图
*

复制代码

  用户操作流程：
  ┌─────────────────────────────────────────┐
  │ 1. 编辑关联字段                          │
  │    └─ 点击"管理扩展列"按钮                │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 2. 打开扩展列管理器                      │
  │    └─ 配置扩展列（选择字段、设置名称）    │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 3. 保存配置（临时）                      │
  │    └─ 保存到关联字段的 config 中         │
  │    └─ 注意：此时还没调用后端              │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 4. 保存关联字段                          │
  │    └─ 点击字段配置的"保存"按钮            │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 5. 检测到扩展列配置                      │
  │    └─ 系统发现 config 中有 extendedColumns│
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 6. 调用后端API创建扩展列字段             │
  │    └─ createRelateExtendFields          │
  │    └─ 后端创建/更新/删除字段              │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 7. 更新字段列表缓存                      │
  │    └─ 直接API调用获取最新数据            │
  │    └─ 更新 React Query 缓存              │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 8. 失效其他相关缓存                      │
  │    └─ 表格详情、视图数据等                │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 9. 延迟300ms后刷新表格数据               │
  │    └─ refreshExtendedColumns            │
  │    └─ 全表刷新（因为结构变了）            │
  └─────────────────────────────────────────┘
             ↓
  ┌─────────────────────────────────────────┐
  │ 10. 完成                                 │
  │     └─ 扩展列字段已创建并显示             │
  └─────────────────────────────────────────┘

刷新触发的时机和原因
- 在了解上面的流程后我们可以看到，在后端完成了实际的创建拓展列工作后，前端会对旧数据进行一个失效标记，而在一定的条件下回去对旧数据进行刷新，然后获取新的数据，所以我们猜测是不是这部分出现了问题，例如条件没有被触发，ReactQuery内仍然是旧数据没有刷新，于是我们让AI帮我们检索这部分逻辑，以及提出解决问题的方案。

三、与 AI 协作的复盘

提问
- 现在，我不需要你创建任何文档来向我说明，我需要你提供一个思路或者建议，首先我需要解决的问题是，我要解决表单在创建单项关联的拓展页面时，会出现闪烁或者不刷新的问题，其次我需要借助AI帮我解决问题的情况下，一能大概理解底层的逻辑和机制，但不不需要细致的读懂代码，我需要知道的是开发逻辑，这能更好的帮助我理解AI开发，其次是在这个过程当中我应该学习和收获的东西，基于此我需要你给出一些建议
思路
- 我先把问题描述给AI，并且提出需求，并且让AI给我可以参考的解题思路
结果
- AI让我先了解整个创建的业务逻辑，然后是架构设计，最后是实现细节，并且给我一些向AI提问的模版或者思路，于是我进一步向AI提问，让他结合代码分析当前的实现和业务逻辑

提问
- 那我从边学习边总结整理边解决问题的角度，先进行基本的了解，首先是创建一个拓展列的核心业务流程是怎么样的

结果
- AI给了我详细的流程，我总结整理，详细可看标题二整理的，并且帮我画了一个业务流程图。
思考
- 在我整理好整个流程后，我重点关注了在拓展列后端完成后，前端的缓存机制以及刷新机制中，并且进一步让AI帮助分析，一开始我并不理解什么是失效缓存，我在整理的过程中进行了标记

提问
- 我可不可以这样简单理解整个流程，我前端用户操作配置好后，我先是把配置保存在前端的关联字段中，然后我向后端接口发送这些信息，然后后端去进行整体的更新操作，更新表单的实际内容结构加数据，然后反馈给前端，然后前端再继续表单的更新，这个更新需要把表单的列配置更新，并且还需要更新数据，而列配置和数据的信息，其实是需要向后端要的，也就是查询接口？这是我理解的整个流程，至于细节上的什么失效缓存，我理解是一种保护机制，但具体什么意思，怎么个逻辑我不清楚
思路
- 我把我整理后的理解和问题一起向AI进行提问，一个是为了让AI去判断我的理解是否有偏差，并且对细节进行补充
结果
- AI肯定了我的理解并且对细节进行了补充，然后解释了什么是失效缓存机制
复制代码
```
  失效缓存（invalidateQueries）
  │
  ├─ 作用：标记缓存为"可能过期"
  │
  ├─ 不立即删除：缓存还在，还能用
  │
  ├─ 触发重新查询：下次使用时，如果缓存过期了，就去后端查询
  │
  └─ 好处：不立即查询，避免不必要的网络请求
```
- 在后端处理好后，前端首先是调用了getTableList去获取了最新的字段列表，我们可以看到拓展字段列确实被创建出来了
- 然后如果已经知道了最新数据，则直接使用setQueryData，直接更新最新的数据，如果不确定数据是否变化就会调用invalidateQueries（失效其他缓存），把旧数据标记成了过期数据，然后再满足两个条件时会刷新（有地方使用这份数据、那个地方愿意在发现数据过期时发起新请求），所以我认为大概率是这部分出来问题，使得数据没有成功刷新
- AI给出了几种导致这个原因的猜测，于是我们进一步利用AI，将情况描述给AI，让AI辅助我们分析是哪一种情况，并且对应的解决方案是什么

提问
- 我和你描述一下现在的问题，我们先不管闪烁的事情，这个后续再仔细检查优化好了，现在有个问题是，除了名字的字段作为扩展列新增时，会立刻刷新出数据，其他类型的拓展列是不会刷出来的，我能看到表单在刷新，并且我尝试点击其他表单，然后再点击回去进行刷新，但还是不会刷出来，而是需要我刷新浏览器才可以出来，字段列是有第一时间刷出来的，这个问题结合我们前面对整个流程的分析，最大可能是哪里出了问题，你去检查相关代码
回答
- 首先AI分析了字段会刷新出来，说明字段结构的刷新是正常调用的，其次分析了现象，为什么名字这个字段可以立即刷新，然后其他字段不刷新，得出结论，数据源在使用旧缓存。
- 失效缓存只是"打标签"，并没有清掉缓存对象本身是核心的问题
- "失效缓存 + 数据源优先用缓存"这两件事没协商好
- 提供了解决思路：创建拓展列时，删除数据缓存 +创建扩展列时，使用强制刷新（purge: true）
最后我让AI帮我按照这个思路去解决问题，并且成功的达到了预期效果。

四、学习收获清单

1. 对单项关联拓展列的业务逻辑有了更加清晰的认识

理解了具体的业务逻辑
理解缓存机制的作用
理解了刷新机制

2. 状态管理思维

理解 React Query 的缓存机制

理解状态同步的重要性

理解避免重复更新的方法

3. 性能优化思维

理解为什么需要精确刷新

理解为什么需要延迟执行

理解为什么需要避免重复刷新

4. 问题解决思维

如何定位问题（时序、缓存、重复）

如何设计解决方案（统一入口、优化时序）

如何验证解决方案（测试、观察）