How to use the loading property in a watchQuery when using the Apollo client for GraphQl
It is posible, you need to set the option notifyOnNetworkStatusChange: true, it is explained in this documentation and then use the loading prop:
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;
});
Your subscription has the loading
parameter:
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