2

在 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()方法作为此处描述的解决方案不感兴趣。

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

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

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

至

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

然后我在控制台中看到：

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

所以我确信阿波罗正在处理这个查询。但我不知道如何访问结果或状态。

4

1 回答 1

1

解决方法是在其上处理querylike Promise 和usethen方法。

如此处所述：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处理失败

于 2018-08-05T22:05:32.617 回答