在使用GraphQl的Apollo客户端时,如何在watchQuery中使用loading属性

Question

因此,当我从查询中得到响应时,我可以看到有一个加载属性.但我真的不明白为什么他们会传递它.因为当你得到响应时,意味着加载完成,因此加载总是错误的.

有没有办法,我可以使用此加载属性,以便我可以例如在呼叫仍在加载时出现加载图标？

我在Angular 2环境中有以下代码:

public apolloQuery = gql`
    query {
        apolloQuery 
    }`;

const sub = this.apollo.watchQuery<QueryResponse>({
    query: this.apolloQuery 
}).subscribe(data => {
    console.log(data);
    sub.unsubscribe();
});

并且来自数据对象的日志包含我正在谈论的加载属性,这始终是错误的.

我知道我可以创建自己的布尔属性并检查这种方式,但我只是想知道我是否可以使用Apollo提供的内置加载属性？

Answer 1

这是可能的，您需要设置选项notifyOnNetworkStatusChange: true，在本文档中有说明，然后使用加载道具：

this.querySubscription = this.apollo.watchQuery<any>({
  query: CurrentUserForProfile
  ,notifyOnNetworkStatusChange: true <-- This will make the trick
})
  .valueChanges
  .subscribe(({ data, loading }) => {
    this.loading = loading; <-- now this will change to false at the start of the request
    this.currentUser = data.currentUser;
  });

Answer 2

您的订阅具有loading参数：

import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

// We use the gql tag to parse our query string into a query document
const CurrentUserForProfile = gql`
  query CurrentUserForProfile {
    currentUser {
  login
  avatar_url
}
  }
`;

@Component({ ... })
class ProfileComponent implements OnInit, OnDestroy {
  loading: boolean;
  currentUser: any;

  private querySubscription: Subscription;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.querySubscription = this.apollo.watchQuery<any>({
      query: CurrentUserForProfile
    })
      .valueChanges
      .subscribe(({ data, loading }) => {
        this.loading = loading;
        this.currentUser = data.currentUser;
      });
  }

  ngOnDestroy() {
    this.querySubscription.unsubscribe();
  }
}

https://www.apollographql.com/docs/angular/basics/queries.html