如何使用 apollo 等待 graphql 查询完成？

【问题标题】：how to wait a graphql query is finished using apollo?如何使用 apollo 等待 graphql 查询完成？
【发布时间】：2018-06-09 02:35:36
【问题描述】：

我有以下代码：

  ngOnInit() {

    this.data = this.apollo.query({ query: ResidentQuery }).subscribe(({data, loading}) => {
      this.data = data;
      this.loading = loading;
    });

    if (!this.loading) {
      // using this.data
    }
   }

我希望在 (!this.loading) 之后处理数据之前加载数据。情况并非如此，因为加载是异步的。在使用它们之前如何等待数据加载？

我正在使用 apollo 客户端进行 graphql 查询。 ResidentQuery 是一个包含 graphql 查询的字符串。

感谢您的反馈！

【问题讨论】：

标签： graphql apollo

【解决方案1】：

我不确定 angular 是如何工作的，但我知道它在 react 中是如何工作的，而且我知道两者是相似的。

在反应中，您需要使用componentWillReceiveProps()（编辑：现已弃用），例如：

componentWillReceiveProps(newProps){
        if(!newProps.query.loading){
            this.setState({data: newProps.query.data})
        }
    }

来自how angular and react lifecycles are similar的中篇文章

基本上，道具会被Angular自动绑定，所以我假设 setter 和 getter 函数将是那部分，它给出你是一种生成复杂状态或变量的方法，比如你可以做什么在 componentWillReceiveProps() 中。

【讨论】：