web-dev-qa-db-ja.com

GraphQlのApolloクライアントを使用するときに、watchQueryでloadingプロパティを使用する方法

クエリから応答を取得すると、loadingプロパティがあることがわかります。しかし、私は彼らがなぜそれを渡すのか本当にわかりません。応答を受け取ったときは、読み込みが完了したことを意味するため、読み込みは常にfalseになります。

この読み込みプロパティを使用して、たとえば呼び出しがまだ読み込まれているときに読み込みアイコンを表示できるようにする方法はありますか？

Angular 2環境に次のコードがあります：

public apolloQuery = gql`
    query {
        apolloQuery 
    }`;

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

そして、データオブジェクトからのログには、私が話していた読み込みプロパティが含まれています。これは常にfalseです。

私は自分のブールプロパティを作成してこの方法で確認できることを知っていますが、Apolloが提供する組み込みの読み込みプロパティを使用できるかどうか疑問に思っていましたか？

angulargraphqlapollo-client
14
Martijn van den Bergh

サブスクリプションには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

2
Rubén Soler