React-apollo 缓存分页查询（项目列表）答案

【问题标题】：React-apollo caching of paginated queries (list of items)React-apollo 缓存分页查询（项目列表）
【发布时间】：2018-09-24 06:40:04
【问题描述】：

我有一个分页查询，它返回一个项目列表...

查询sn-p：

const MY_POTENTIAL_VOTERS = gql`
  query potentialVoters(...) {
    potentialVoters(...) 
     {
      items {
        id
        ....
      }
      pageInfo {
        nextCursor
        totalCount
      }
    }
  }
`;

在反应中，我然后映射 data.potentialVoters.items 并将它们呈现到 UI。然后，UI 允许对页面中的一个项目执行突变的操作。

突变sn-p：

const ASSOCIATE_PV_VOTER = gql`
  mutation updatePotentialVoter($pv_id: String!, $voter_id: String) {
    updatePotentialVoter(id: $pv_id, data: { state_file_id: $voter_id }) {
      id
      ...
    }
  }
`;

在探索 devtools 时，似乎受影响项目的缓存正在使用变异信息正确更新，但是该行 UI（来自页面查询）没有像我预期的那样更新。即使使用 refetchQueries 选项，有时突变也不会反映在列表渲染中，除非我硬刷新。

我已经找到了解决问题的方法，但我怀疑这可能不是一个好主意。如果我的页面查询仅将项目的 ID 传递给单独的组件，该组件又使用它自己的查询来获取该项目的数据，我认为它正在智能地使用缓存和所有内容按预期更新，但这似乎是一种可能导致双重获取的反模式。

如果列表成员项在缓存中更新，我执行分页查询的方式可能有问题吗？我的解决方法真的是个坏主意吗？

【问题讨论】：

标签： reactjs caching react-apollo

【解决方案1】：

我将页面查询从使用 Apollo HOC 重构为新的 Query 组件，这似乎解决了所有问题。然后，我可以使用 Mutation 组件的 update 属性覆盖页面项数组中的变异对象，这现在会导致我的页面按预期更新。

【讨论】：