Блог

На работе мы создаем большой проект, в котором используются библиотеки, созданные разными командами. Мы столкнулись с проблемой с Apollo-Angular, заключающейся в том, что при импорте одного модуля с собственным модулем graphql с APOLLO_NAMED_OPTIONS он работает правильно. Однако, если конкретному приложению необходимо импортировать несколько модулей со своими собственными модулями graphql, кажется, что что-то сталкивается. Мы получаем ошибку, при которой загружаются только именованные параметры из одного файла, в результате чего многие службы и компоненты не работают с ошибками, связанными с отсутствующими именами graphql.

Я сделал Stackblitz, чтобы продемонстрировать основной недостаток, но другие модули graphql поставляются в комплекте с другими компонентами и библиотеками, а не бок о бок, как в моем примере с Stackblitz.

Модуль GraphQL #1:

 import { NgModule } from '@angular/core';
import { APOLLO_NAMED_OPTIONS, NamedOptions } from 'apollo-angular';
import { InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';

@NgModule({
  providers: [
    {
      provide: APOLLO_NAMED_OPTIONS,
      useFactory(httpLink: HttpLink): NamedOptions {
        return {
          appList: {
            cache: new InMemoryCache(),
            link: httpLink.create({
              uri: 'https://graphql-voter-app.herokuapp.com/";',
            }),
            defaultOptions: {
              query: {
                fetchPolicy: 'no-cache',
              },
              watchQuery: {
                fetchPolicy: 'no-cache',
              },
            },
          },
        };
      },
      deps: [HttpLink],
    },
  ],
})
export class AppListGraphQLModule {}

 

Модуль GraphQL #2:

 import { NgModule } from '@angular/core';
import { APOLLO_NAMED_OPTIONS, NamedOptions } from 'apollo-angular';
import { InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';

@NgModule({
  providers: [
    {
      provide: APOLLO_NAMED_OPTIONS,
      useFactory(httpLink: HttpLink): NamedOptions {
        return {
          switchFauna: {
            cache: new InMemoryCache(),
            link: httpLink.create({
              uri: 'https://graphql-voter-app.herokuapp.com/',
            }),
            defaultOptions: {
              query: {
                fetchPolicy: 'no-cache',
              },
              watchQuery: {
                fetchPolicy: 'no-cache',
              },
            },
          },
        };
      },
      deps: [HttpLink],
    },
  ],
})
export class GameGraphQLModule {}
 

Стакблитц:

https://stackblitz.com/edit/simple-apollo-angular-example-njqnwm?devtoolsheight=33amp;file=app/applist-gql.module.ts

В примере можно найти только один именованный параметр из одного модуля graphql.

Порывшись в Интернете, прочитав несколько веб-сайтов и примеров документации, я думаю, что понял это. Вышеприведенный Stackblitz теперь обновлен, и он работает.

В библиотеке каждый модуль graphql должен быть переопределен как:

 @NgModule({
  exports: [HttpClientModule],
})
export class AppListGraphQLModule {
  constructor(apollo: Apollo, httpLink: HttpLink) {
    apollo.create(
      {
        link: httpLink.create({
          uri: 'https://graphql-voter-app.herokuapp.com/',
        }),
        cache: new InMemoryCache(),
        defaultOptions: {
          query: {
            fetchPolicy: 'no-cache',
          },
          watchQuery: {
            fetchPolicy: 'no-cache',
          },
        },
      },
      'appList'
    );
  }
}
 

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

Пример:

 ...

export class ExampleGraphQLModule {
  constructor(apollo: Apollo, httpClient: HttpClient) {
    apollo.create({ ...optionsHere }, 'namedEndpoint1');
    apollo.create({ ...optionsHere }, 'namedEndpoint2');
  }
}