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

【问题标题】：How do you manage multiple graphql modules in Apollo-Angular?你如何在 Apollo-Angular 中管理多个 graphql 模块？
【发布时间】：2021-11-27 03:27:24
【问题描述】：

在工作中，我们正在构建一个利用不同团队制作的库的大型项目。我们在使用 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 {}

堆栈闪电战：

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

在示例中，只能从一个 graphql 模块中找到一个命名选项。

【问题讨论】：

标签： angular graphql apollo apollo-client apollo-angular

【解决方案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');
  }
}

【讨论】：