3 ways to setup your Angular Apollo client
When reading the documentation of Apollo and how to set it up with Angular you come across two different ways of initializing the library and its dependencies. Even if they represent the majority of the cases, sometime it won’t fit your need. That’s why there is another way to initializing Apollo, using the APOLLO_OPTIONS token.
Let’s take a look at each one to be able to compare how and why you will want to use one or another.
Using ApolloBoost
The first and most simple way to setup the Apollo client is by using the ApolloBoostModule and calling the create() method as describe in the documentation.
import { HttpClientModule } from "@angular/common/http";
import { ApolloBoostModule, ApolloBoost } from "apollo-angular-boost";
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
ApolloBoostModule],
...
})
export class AppModule {
constructor(boost: ApolloBoost) {
boost.create({
uri: "https://graphql_url",
// Don't forget that you can actually pass http Headers
// directly here with the option "httpOptions"
})
}
}This approach is the default one, and will cover all the need for basics projects.
Manually calling the ApolloModule
This is the same principle here, although slightly different. We are directly using each module separately to setup our Apollo configuration.
import { HttpHeaders } from '@angular/common/http';
import { Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
@NgModule({ ... })
class AppModule {
constructor(
apollo: Apollo,
httpLink, HttpLink
) {
apollo.create({
link: httpLink.create({
uri: "https://graphql_url",
// Don't forget that you can actually pass http Headers
// directly here with the option "httpOptions"
}),
cache: new InMemoryCache(),
});
}
}This way is for more experienced developer who want to have the complete control on what to implement and how.
Using the Injection token mechanism
Another alternative is to use APOLLO_OPTIONS injection token available to setup all instances of the Apollo client.
// ... imports@NgModule({
imports: [
BrowserModule,
HttpClientModule,
ApolloModule,
HttpLinkModule
],
declarations: [ AppComponent, HelloComponent ],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: httpLink => {
return {
link: httpLink.create({
uri: "https://graphql_url"
// If needed, you can set custom headers here
// headers: new HttpHeaders({
// Authorization: `Bearer TOKEN`
// })
}),
cache: new InMemoryCache()
};
},
deps: [HttpLink]
}
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
By using APOLLO_OPTIONS we can define options using the dependency injection options that will be passed to Apollo service. This token will be generated before any service are instantiated therefor the dependent services will use its options.
Setup with the ApolloClient with the InjectionToken will enable you to we have multiple modules lazy loaded, all sharing the same settings.
An example is available on Stackblitz:
