如何为具有分离数据源的 2 个反应组件更新 relayjs 缓存

Posted 2023-03-08

【中文标题】如何为具有分离数据源的 2 个反应组件更新 relayjs 缓存

【英文标题】：How to update relayjs cache for a 2 react components which have separated data source

【发布时间】：2017-01-14 05:59:57

【问题描述】：

我正在尝试在另一个组件进行突变并且后端更改数据源之后更新组件的relayjs缓存。

用户挂载C1，它对D1有数据依赖。 用户导航到对 D2 具有数据依赖性的 C2。 用户改变 D2 数据。 用户再次挂载 C1。

D1片段受D2突变影响的关系：D2->D->D1

C1 具有该片段的缓存版本，并且在 componentMount 上它不会请求新数据，因为该数据已经在中继缓存中。

如何使用 new Mutated(D1) 进行 C1 渲染。 如何使 C1 的中继缓存失效。

C1 和 C2 位于不同的 Pages/React-Router 路径上。

【参考方案1】：

突变中的getFatQuery 方法告诉relay 什么会因突变而改变。连同getConfigs 和您的本地图数据，它将构建一个突变查询，该查询将获得您需要的数据（不会过度/不足）。

根据您的图形结构，这可能会有所不同，但这里有一个示例来说明。假设 d2 是待办事项，d1 是待办事项列表。

class UpdateTodoMutation extends Relay.Mutation 
  getFatQuery() 
    return Relay.QL`
      fragment on updateTodoPayload 
        todo 
          title,
          dueDate,
          completed,
        
        viewer 
          todos,
        ,
      
    `;
  

要深入了解 Relay 突变，请查看这篇博文 — http://blog.pathgather.com/blog/a-beginners-guide-to-relay-mutations 和中继 documentation。

【讨论】：

* 你说的是真的。但我的情况不同：C1D1 和 C2D2 之间没有关系。 * 例如：C1D1 是 TodoList。 C2D2 是一个电影列表。 * 我想要实现的是，当在 C2D2 页面上执行新的电影突变，并且用户转换到 C1D1 所在的页面时，我想使 C1D1 缓存无效并获取一个新的 TodoList，其中新电影被添加为被看到。 * 将电影添加到 TodoList 的逻辑在另一个我无法控制的业务层中执行。

是的，实际的解决方案是使用 forceFetch。我想知道我是否可以在 C1D1 中使用订阅，但不知道如何。