是否可以取消 config.options 中的 graphql 查询？答案

【问题标题】：Is it possible to cancel a graphql query inside config.options?是否可以取消 config.options 中的 graphql 查询？
【发布时间】：2017-09-17 21:54:38
【问题描述】：

假设我有这部分代码：

export default graphql(MyQuery, {
  options: (props) => ({
    variables: {
      var1: props.var1,
      var2: props.var2,
      var3: props.var3
      /* I want to do this: 
         if (props.var4 == "Donot query") /* Cancel this query; */
      */
    }
  })
})(DumbComponent)

可以这样做吗？原因是我的 props 是由 Redux store 注入的。某些查询需要对 var1 和 var2 进行组合更改，例如获取正确的数据。但是，有时某些操作只会更改 Redux 中的 var1，这会触发 graphql 查询并产生不正确的数据。对于这些情况，我想取消查询。

我知道这个问题可以通过设计来解决。这意味着我们可以在 Redux 中单独创建查询所需的一组变量，任何操作触及这个集合，都需要触及集合中的个体。

但是，这样做需要 Redux 了解特定的 graphql 查询，从而形成紧密耦合。

【问题讨论】：

标签： redux graphql apollo react-apollo

【解决方案1】：

根据“取消查询”的含义，您可以使用skip 选项：

export default graphql(MyQuery, {
  skip: (props) => !! props.var4,
  options: (props) => ({
    variables: {
      var1: props.var1,
      var2: props.var2,
      var3: props.var3
    }
  })
})(DumbComponent)

在此处查看相关文档：http://dev.apollodata.com/react/api-graphql.html#graphql-config-skip

【讨论】：

我确实尝试过跳过，它不是为此目的而设计的。它将跳过整个查询，并从道具中“删除”我的注入数据。我希望能够在 props 中保留旧注入的数据，否则组件将无法呈现。
您可以做的一件事是将数据复制到状态中，或者在变量准备好之前不设置变量

【解决方案2】：

你可以参考这个StackOverflow answer

我制作了一个 POC 来阐明 - 如何取消 Apollo GraphQL 挂起的请求。修改源代码以满足您的要求。

编码愉快！

【讨论】：