3 способа настроить клиент Angular Apollo

При чтении документации Apollo и о том, как настроить ее с помощью Angular, вы встретите два разных способа инициализации библиотеки и ее зависимостей. Даже если они представляют большинство случаев, иногда это не соответствует вашим потребностям. Вот почему есть другой способ инициализации Apollo с использованием токена APOLLO_OPTIONS.

Давайте посмотрим на каждый из них, чтобы сравнить, как и почему вы захотите использовать тот или иной.

Использование ApolloBoost

Первый и самый простой способ настроить клиент Apollo - использовать ApolloBoostModule и вызвать метод create(), как описано в документации.

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"
    })
  }
}

Этот подход используется по умолчанию и покрывает все потребности в базовых проектах.

Вызов ApolloModule вручную

Здесь тот же принцип, хотя и немного другой. Мы напрямую используем каждый модуль отдельно для настройки нашей конфигурации Apollo.

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(),
    });
  }
}

Этот способ предназначен для более опытных разработчиков, которые хотят иметь полный контроль над тем, что и как реализовать.

Использование механизма токена инъекции

Другой альтернативой является использование доступного маркера внедрения APOLLO_OPTIONS для настройки всех экземпляров клиента Apollo.

// ... 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 { }

Используя APOLLO_OPTIONS, мы можем определять параметры, используя параметры внедрения зависимостей, которые будут переданы службе Apollo. Этот токен будет сгенерирован до того, как будет создана какая-либо служба, поэтому зависимые службы будут использовать ее параметры.

Установка с ApolloClient с InjectionToken позволит вам иметь несколько ленивых модулей, которые используют одни и те же настройки.

Пример доступен на Stackblitz: