https://github.com/kamilkisiela/apollo-angular-link-network-status
Information about the network status of your GraphQL operations. Built for Apollo Angular.
https://github.com/kamilkisiela/apollo-angular-link-network-status
angular apollo-angular apollo-client apollographql graphql graphql-js typescript
Last synced: 3 months ago
JSON representation
Information about the network status of your GraphQL operations. Built for Apollo Angular.
- Host: GitHub
- URL: https://github.com/kamilkisiela/apollo-angular-link-network-status
- Owner: kamilkisiela
- Created: 2018-12-20T20:06:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-01T20:41:49.000Z (almost 5 years ago)
- Last Synced: 2025-03-25T07:11:40.968Z (3 months ago)
- Topics: angular, apollo-angular, apollo-client, apollographql, graphql, graphql-js, typescript
- Language: TypeScript
- Size: 12.7 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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
- [working example on StackBlitz.io](https://stackblitz.com/edit/apollo-angular-network-status?file=app%2Fgraphql.module.ts)
Setup the module:
```typescript
import { ApolloNetworkStatusModule } from 'apollo-angular-link-network-status';
@NgModule({
imports: [
//...
ApolloNetworkStatusModule
]
})
export class AppModule {}
```
Use the link:
```typescript
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:
```typescript
import { Component } from '@angular/core';
import { ApolloNetworkStatus } from 'apollo-angular-link-network-status';
@Component({
selector: 'app',
template: `
Loading
`,
})
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);
});
}
}
```