Question

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

查询摘录：

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

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

变异片段：

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传递给单独的组件，而该组件又使用它自己的查询来获取该项目的数据，我认为它正在智能地使用缓存和所有内容按预期更新，但这似乎是一种可能导致双重提取的反模式。

如果列表成员项在缓存中更新，我执行分页查询的方式可能会出错吗？我的解决方法是一个非常糟糕的主意吗？

Answer 1

我使用Apollo HOC重构了页面查询到新的Query组件，这似乎解决了所有问题。然后，我能够使用Mutation组件的更新prop来覆盖页面项数组中的mutatated对象，这会导致我的页面按预期更新。

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

1 个答案: