Apollo：重新获取突变后具有多个变量排列的查询答案

【问题标题】：Apollo: Refetch queries that have multiple variable permutations after mutationApollo：重新获取突变后具有多个变量排列的查询
【发布时间】：2018-02-21 10:43:20
【问题描述】：

假设我有一个表格，它使用如下查询列出了一堆帖子：

const PostsQuery = gql`
  query posts($name: string) {
    posts {
      id
      name
      status
    }
  }
`;

const query = apolloClient.watchQuery({query: PostsQuery});
query.subscribe({
  next: (posts) => console.log(posts) // [ {name: "Post 1", id: '1', status: 'pending' }, { name: "Paul's Post", id: '2', status: 'pending'} ]
});

然后我的用户出现并在搜索字段中输入一个值并调用此代码：

query.setVariables({name: 'Paul'})

它会提取过滤后的帖子并将其正常注销。

// [ { name: "Paul's Post", id: '2', status: 'pending'} ]

现在，在我的表格中有一个按钮，可以将帖子的状态从“待处理”更改为“活动”。用户点击它，它会调用如下代码：

const PostsMutation = gql`
   mutation activatePost($id: ID!) {
     activatePost(id: $id) {
        ok
        object {
           id
           name
           status
        }
     }
   }
`;
apolloClient.mutate({mutation: PostsMutation});

突变一切正常，但现在我想重新获取表数据以使其具有最新的数据，因此我进行了更改：

apolloClient.mutate({
  mutation: PostsMutation,
  refetchQueries: [{query: PostsQuery, variables: {name: 'Paul'}]
});

万岁，成功了！

// [ { name: "Paul's Post", id: '2', status: 'active'} ]

但是...现在我的用户清除了搜索查询，期待结果更新。

query.setVariables({});

// [ {name: "Post 1", id: '1', status: 'pending' }, { name: "Paul's Post", id: '2', status: 'pending'} ]

哦不！因为在我们的突变中没有使用我们的“原始”变量（意味着没有）重新获取数据，所以我们得到的是陈旧的数据！

那么，如果您的突变可能会影响可能具有多种变量排列的查询，您该如何处理？

【问题讨论】：

您没有得到答案的可能原因有两个：您的问题太长以及您使用了排列一词。

标签： apollo

【解决方案1】：

我遇到了类似的问题，我正在使用 Apollo 和 Angular，所以我不确定这个方法是否适用于 React Client，但应该可以。

如果您仔细查看mutate 方法的refetchQueries 属性，您会发现该函数还可以返回一个查询名称的字符串数组以重新获取。通过仅将查询名称作为字符串返回，您无需担心变量。请注意，这将重新获取与名称匹配的所有查询。因此，如果您有很多不同变量的查询，最终可能会是一个很大的请求。但是，就我而言，值得权衡。如果这是一个问题，您还可以通过apolloClient.queryManager 访问queryManager，您可以使用它对要重新获取的内容进行更细粒度的控制。我没有实现它，但它看起来很有可能。我发现下面的解决方案很适合我的需求。

在你的代码中，你需要做的是：

apolloClient.mutate({
 mutation: PostsMutation,
 refetchQueries: (mutationResult) => ['PostQueries']
});

这将重新获取名称为“PostQueries”的任何查询。同样，如果您深入查询管理器并对活动的监视查询进行一些过滤，则可以仅重新获取其中的一个子集。但是，这是另一个练习。

【讨论】：