Как использовать свойство загрузки в watchQuery при использовании клиента Apollo для GraphQl
Поэтому, когда я получаю ответ на свой запрос, я вижу, что есть свойство загрузки. Но я действительно не понимаю, почему они передали это. Потому что, когда вы получаете ответ, это означает, что загрузка завершена, поэтому загрузка всегда будет ложной.
Есть ли способ использовать это свойство загрузки, чтобы, например, отображать значок загрузки, когда вызов все еще загружается?
У меня есть следующий код в среде Angular 2:
public apolloQuery = gql`
query {
apolloQuery
}`;
const sub = this.apollo.watchQuery<QueryResponse>({
query: this.apolloQuery
}).subscribe(data => {
console.info(data);
sub.unsubscribe();
});
И журнал из объекта данных содержит свойство загрузки, о котором я говорил, которое всегда ложно.
Я знаю, что могу создать собственное логическое свойство и проверить таким образом, но мне просто было интересно, могу ли я использовать встроенное свойство загрузки, которое предоставляет Apollo?
Ответы 3
В вашей подписке есть параметр 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
Метод watchQuery возвращает объект QueryRef, который имеет свойство valueChanges, которое является Observable. Мы можем видеть, что объект результата содержит загрузку, логическое значение, указывающее, находится ли запрос «в полете».: github.com/apollographql/apollo-angular/blob/master/docs/sou rce /…
С этим комментарием я понимаю, что параметр загрузки доступен в момент выполнения подписки, а не когда вызов уже выполнен.
@MartijnvandenBergh: почему вы отметили это как правильный ответ? Он не отвечает на ваш вопрос - правильный ответ предоставлен nanitohb ниже.
Не могли бы вы обновить ссылочную ссылку на веб-сайте apollo angular
Возможно, вам нужно установить параметр 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;
});
Вот WatchQueryOptions в ApolloClient 3
export interface WatchQueryOptions<TVariables> extends CoreWatchQueryOptions<TVariables> {
/**
* Observable starts with `{ loading: true }`.
* There's a big chance the next major version will enable that by default.
*
* Disabled by default
*/
useInitialLoading?: boolean;
}
это означает, что вам все равно нужно явно указать, что вы хотите получать уведомление о пометке "загрузка" изменения статуса (useInitialLoading: true), иначе вы получите только false.
const variables = {};
return apollo
.watch(variables, { useInitialLoading: true })
.valueChanges
.subscribe(({data, loading})=> console.info(loading)));
Примечание. Если проблемы по-прежнему возникают, используйте версия выше, чем 2.4.
Я понимаю это, но какая польза от этого и, что более важно, как я могу ее использовать? Я не вижу важности этого, потому что я могу сделать это сам намного проще: при вызове я устанавливаю логическое значение «загрузка» в значение true, когда я получаю вызов, я возвращаю его в значение false. Логический параметр, предоставленный bu GraphQL, доступен мне только тогда, когда вызов уже выполнен, верно?