如何访问由点击事件触发的 apollo (GraphQL) 查询的状态

Question

在 vue 应用程序中，当用户单击按钮时，我需要运行 gql 查询。所以HTML部分有按钮：

<div 
  :id="'button-' + id"
  class="more-button" 
  @click="showDetails(id)">&nbsp;</div>

相应的函数正在做一些调试console.log 并触发this.apollo.query。 问题是我可以在控制台中看到所有的 console.log 输出，所以函数执行了，但是没有钩子：error/result/watchLoading 发生。 至少我在控制台输出中看不到任何内容。

showDetails(item) {
  console.log("before: " + msid);
  let msid = this.position.instrument.morningstarId;
  this.xxx = msid;
  this.$apollo.query({
    query: GET_INSTRUMENT,
    variables: {
      morningstarId: this.position.instrument.morningstarId
    },
    result({ data }) {
      console.log("L data: " + JSON.stringify(data));
    },
    error(error) {
      alert("L We've got an error!" + JSON.stringify(error));
    },
    watchLoading(isLoading) {
      console.log("L isLoading: " + isLoading);
    }
  });
  console.log("after: " + msid);
}

当我将this.$apollo.query 的所有内容移动到组件中的apollo 部分时，一切正常。所以修改后的工作代码是这样的：

...
data() {
  return {
    instrument: null
  };
},
  apollo: {
    instrument: {
      query: GET_INSTRUMENT,
      variables() {
        return {
          morningstarId: this.position.instrument.morningstarId
        };
      },
      result({ data }) {
        console.log("G data: " + JSON.stringify(data));
      },
      error(error) {
        alert("G We've got an error!" + JSON.stringify(error));
      },
      watchLoading(isLoading) {
        console.log("G isLoading: " + isLoading);
      }
    }
  },
computed
...

但我不想在构建组件时调用此查询。我只想从函数中调用它。我对使用skip() 方法作为here 描述的解决方案不感兴趣。

问题是：我做错了什么，任何 watchLoading/error/result 挂钩都会将任何内容记录到控制台？

控制台中既没有错误也没有警告。但是如果通过更改强制错误：

  this.$apollo.query({
    query: GET_INSTRUMENT,

到

  this.$apollo.query({
    q_uery: GET_INSTRUMENT,

然后我在控制台中看到：

QueryManager.js?96af:473 未捕获的错误：需要查询选项。您必须在查询选项中指定您的 GraphQL 文档。

所以我确信 apollo 正在处理该查询。但我不知道如何访问结果或状态。

Answer 1

解决方案是将query 视为Promise 并对其使用then 方法。

如here 所述：Promise 对象表示异步操作的最终完成（或失败）及其结果值。

所以不是我使用的代码：

showDetails(item) {
  console.log("before: " + msid);
  let msid = this.position.instrument.morningstarId;
  this.xxx = msid;
  this.$apollo.query({
    query: GET_INSTRUMENT,
    variables: {
      morningstarId: this.position.instrument.morningstarId
    },
    result({ data }) {
      console.log("L data: " + JSON.stringify(data));
    },
    error(error) {
      alert("L We've got an error!" + JSON.stringify(error));
    },
    watchLoading(isLoading) {
      console.log("L isLoading: " + isLoading);
    }
  });
  console.log("after: " + msid);
}

访问结果和处理错误的工作代码是：

showDetails(item) {
    this.$apollo
      .query({
        query: GET_INSTRUMENT,
        variables: {
          morningstarId: this.instrumentObj.instrument.morningstarId,
          freq: this.chartFrequency
        }
      })
      .then(data => {
        this.instrument = data.data.instrument;
        this.loading = data.loading;
        this.networkStatus = data.networkStatus;
        this.generatePastChart();
      })
      .catch(error => {
        this.error = error;
        alert("E " + error);
      });

}

then 方法注册一个回调函数，并将检索到的数据对象作为输入参数。
catch 处理失败