Apollo GraphQl 存储派生数据

Question

一些上下文：我正在开发一个 React JS 应用程序，它从数据库中读取地理点并以各种方式 graphs/maps 它们。有直接从数据库中显示数据的原始地图和图表，但也有涉及斜率图、图表面积、直方图、欧几里得距离等点分析的图表和指标。

我设置了一个 GraphQL 客户端，以便将数据提供给我安装了 Apollo-Client 的 React 应用程序。这是 GraphQL 响应的示例：

{
  "data": {
    "Points": [
      {
        "pid": 13196,
        "x": 251.88491821289062,
        "y": 374.1650085449219
      },
      {
        "pid": 13197,
        "x": 257.6238708496094,
        "y": 374.17498779296875
      },
      {
        "pid": 13198,
        "x": 264.04315185546875,
        "y": 374.5350036621094
      },
      ...etc
    ]
  }
}

太棒了！对于至少 2 个不同的数据视图，这是正确的形状，Apollo 客户端使用 InMemoryCache 为我缓存了这个，我根本不需要 redux。

困境：我需要的一堆图涉及很多可重复使用的派生值（比如我可能会在 2 个不同的视图中使用斜率值）。我应该在哪里存储派生数据？

现在我将所有计算都塞进了 React render() 方法，但这似乎不是一个好主意。

选项：

对派生数据使用 Redux，将所有计算放入 reducer 并以某种方式使其与 Apollo graphql 缓存中的内容保持同步。
在服务器上进行推导（然后我可以缓存）并通过网络发送原始数据和派生数据。网络流量增加但客户端计算减少。
每当传入的 graphql 数据发生变化时，继续计算 render() 中的派生值。
也许是我没想到的...

Answer 1

Redux 可能是一个很好的选择 - concerns/logics/data 的分离和良好的可测试性。
这取决于最终的缓存 hit/miss 比率，额外的成本 resources/power - 我会避免这种情况。
渲染不是计算的最佳位置（还有其他生命周期方法）。组件可以使用自己的状态（或新的 getDerivedStateFromProps）但仅与 children 共享。
您可以使用 react context api 或 apollo-link-state 来分享 data/methods。您可以尝试 observables/mobx-like 个解决方案。

我也会避免对数据更新自动进行所有可能的重新计算。使用 components/lifecycles/contexts，您可以准备（缓存和共享）真正需要使用的派生数据。

Apollo GraphQl 存储派生数据

Apollo GraphQl Storing derived data

apollo

reactjs

graphql

react-apollo

apollo-client