Apollo-client: `NetworkStatus.loading` available globally on `ApolloClient`?

[KeithGillette]

Is there any way to determine whether NetworkStatus.loading is true for any currently executing ApolloClient operation?

I'd like to create an application-wide network activity indicator component in an Apollo-Angular project without having each Apollo client .query/.watchQuery/.mutate call report its NetworkStatus.loading. I thought of using middleware/afterware hooks in ApolloClientConfig.networkInterface, but since the Apollo client is configured in the AppModule decorator, it's not easy to construct a hook that would report Apollo network activity in a way that would be available to an Angular component via an injected service.

[jbaxleyiii]

@KeithGillette you can do this with the 2.0 and writing a custom link. I think it would be a great link for others to use as well!

If anyone is interested in writing this, I'm happy to give guidance

[KeithGillette]

Thanks for the fast & helpful response, @jbaxleyiii! That's great news.

As soon as [email protected] is released to support [email protected], I'll migrate our project to both and attempt to use apollo-link to create an application-wide network activity indicator. Any guidance you can provide on creating that a custom link to do so would be greatly appreciated. (Some of the links on the apollo-link documentation are broken, so I didn't get very far in understanding what would be involved.)

[kamilkisiela]

@KeithGillette You can already use [email protected]. I know it's beta but there should be no changes. It all works fine, pretty much all the issues are now fixed.

In the PR you mentioned, there are 3 examples (simple one on StackBlitz two other on github - SSR and NativeScript) which I'm keeping up to date with releasing process.

About the Link, you could create something simple like apollo-link-context.

Since apollo-angular is created inside the Angular it gains the access to Dependency Injection, which means, you can use any Angular Service you want to create a link.

If you want to see how it could be done (with Dependency Injection) you can check the HttpLink I created, it's called apollo-angular-link-http. Pretty much the same thing as the apollo-link-http, but it uses Angular's HttpClient and that gives you so much power and new possibilities!

[KeithGillette]

Thanks for the helpful reply, @kamilkisiela. So if I use apollo-angular-link-http, it seems to me that for my use case, the problem reduces to determining whether Angular's HTTP service is active, which would cover Apollo as well as other Angular application HTTP network activity. In that case, I wouldn't need to write a custom apollo-link and could use existing package that already does that.

Now to figure out the new Apollo-Angular query/mutation typings…

[kamilkisiela]

@KeithGillette that's great! Thanks to using HttpClient we gain so many things like NativeScript support, SSR, features like that one you mentioned! If you have any questions feel free to message me on slack (same user handle)

[KeithGillette]

Thanks so much! With the help of the apollo-client and angular-apollo migration guides, the howtographql/angular-apollo example, and @kamilkisiela's expert guidance, I got our project upgraded to ApolloClient 2.0.1 + Angular-Apollo 1.0.0 with apollo-angular-link-http. I successfully tested a third-party Angular network activity/loading component that intercepts Angular HttpClient used by apollo-angular-link-http, so for now I'll leave my custom link writing to the one I needed for Meteor authentication with apollo-angular-link-http:

const meteorAuthenticationMiddleWareLink = new ApolloLink((operation: Operation, forward: NextLink): Observable<FetchResult> => {
    const meteorAuthenticationToken = Accounts._storedLoginToken();
    if (meteorAuthenticationToken) {
        const headers = new HttpHeaders({'meteor-login-token': Accounts._storedLoginToken()});
        operation.setContext({headers});
    }
    return forward(operation);
});