如何访问由点击事件触发的 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 输出，所以函数执行了，但是钩子的 none：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 处理失败

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

How to access the state of apollo (GraphQL) query triggered by click event

javascript

vuejs2

apollo

vue-apollo