Information about the network status of your GraphQL operations. Built for Apollo Angular.
yarn add apollo-angular-link-network-status # or npm install apollo-angular-link-network-status Setup the module:
import { ApolloNetworkStatusModule } from 'apollo-angular-link-network-status'; @NgModule({ imports: [ //... ApolloNetworkStatusModule ] }) export class AppModule {}Use the link:
import { ApolloNetworkStatus } from 'apollo-angular-link-network-status'; @NgModule({ // ... providers: [{ provide: APOLLO_OPTIONS, useFactory(networkStatus: ApolloNetworkStatus, httpLink: HttpLink) { return { link: networkStatus.concat( // <-- as a regular Apollo Link httpLink.create({ uri }) ), cache: new InMemoryCache() } }, deps: [ApolloNetworkStatus, HttpLink] }] }) export class AppModule {}Usage inside of a component or a service:
import { Component } from '@angular/core'; import { ApolloNetworkStatus } from 'apollo-angular-link-network-status'; @Component({ selector: 'app', template: ` <app-list></app-list> <div *ngIf="(networkStatus.isPending | async)">Loading</div> `, }) export class AppComponent { constructor(public networkStatus: ApolloNetworkStatus) { networkStatus.isPending.subscribe(isPending => { console.log('isPending', isPending); }); networkStatus.onRequest.subscribe(event => { console.log('request', event); }); networkStatus.onSuccess.subscribe(event => { console.log('success', event); }); networkStatus.onError.subscribe(event => { console.log('error', event); }); networkStatus.onCancel.subscribe(event => { console.log('cancel', event); }); } }