如何在Apollo-Angular中管理多个graphql模块？

Question

在工作中，我们正在构建一个大型项目，该项目利用了不同团队创建的库。我们遇到了一个Apollo-Angular的问题，当使用APOLLO_NAMED_OPTIONS导入带有自己的graphql模块的单个模块时，它可以正确运行。然而，如果特定的应用程序需要导入具有自己的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 {}

Stackblitz：

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

在该示例中，只能找到一个来自一个graphql模块的命名选项。

Answer 1

在浏览了互联网，阅读了多个网站和文档示例后，我想我已经弄明白了。上面的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');
  }
}