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

Posted 2023-03-08

【中文标题】如何访问由点击事件触发的 apollo (GraphQL) 查询的状态

【英文标题】：How to access the state of apollo (GraphQL) query triggered by click event

【发布时间】：2019-01-02 10:04:01

【问题描述】：

在 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 正在处理该查询。但我不知道如何访问结果或状态。

【参考方案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 处理失败

【讨论】：

如何以这种方式从服务器获取更新的数据？它只有一次从服务器检索数据。