apollo-angular-link-network-status
v1.0.4
Published
Information about the network status of your GraphQL operations. Built for Apollo Angular.
Downloads
61
Maintainers
Readme
Network Status Link for Angular
Information about the network status of your GraphQL operations. Built for Apollo Angular.
Installation
yarn add apollo-angular-link-network-status
# or
npm install apollo-angular-link-network-status
Example
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);
});
}
}