Подтвердить что ты не робот

Как использовать свойство загрузки в watchQuery при использовании клиента Apollo для GraphQl

Поэтому, когда я получаю ответ от моего запроса, я вижу, что есть свойство загрузки. Но я действительно не понимаю, почему они передадут его. Потому что, когда вы получаете ответ, это означает, что загрузка завершена, поэтому загрузка всегда будет ложной.

Есть ли способ, которым я могу использовать это свойство загрузки, чтобы я мог, например, сделать значок загрузки, когда вызов по-прежнему загружается?

У меня есть следующий код в среде Angular 2:

public apolloQuery = gql'
    query {
        apolloQuery 
    }';

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

И журнал из объекта данных содержит свойство загрузки, о котором я говорил, что всегда ложно.

Я знаю, что могу сделать свое собственное логическое свойство и проверить этот способ, но мне просто интересно, могу ли я использовать встроенное свойство загрузки, которое предоставляет Apollo?

4b9b3361

Ответ 1

В вашей подписке есть параметр 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