Angular Apollo 将 URI 注入 graphql.module.ts答案

【问题标题】：Angular Apollo inject URI into graphql.module.tsAngular Apollo 将 URI 注入 graphql.module.ts
【发布时间】：2020-01-14 14:44:08
【问题描述】：

我正在制作一个 Angular 库，其中包含我们所有应用程序都需要的 auth/graphql 相关代码。

问题是，我将uri 存储在 Angular 环境变量中，而 Angular 库中不存在该变量。

执行ng add apollo-angular 会生成以下模块：

graphql.module.ts（为清楚起见删除了导入）：

const uri = ''; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({uri}),
    cache: new InMemoryCache(),
  };
}

@NgModule({
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

注意uri，它创建了对这个模块的依赖，应该被注入。

在我的应用程序app.module.ts 中，我创建了一个获取环境的提供程序：

providers: [
    {
      provide: 'envVars', useValue: environment
    }
  ]

我通常像这样通过构造函数注入：

constructor(@Inject('envVars') private envVars: any) {}

我尝试了很多方法来注入这个uri，但无济于事！有什么建议吗？

【问题讨论】：

标签： angular dependency-injection graphql apollo-angular

【解决方案1】：

我在 StackOverflow 帖子中找到了解决问题的方法：

https://stackoverflow.com/a/46791075/1207856

但是我根据自己的独特情况调整了我的。

首先在AppModule app.module.ts中，使用forRoot()静态方法提供环境：

GraphQLModule.forRoot(environment)

其次，在您的库模块中，您可以将该环境设置为您的类的静态成员，如下所示：

export class GraphQLModule {
  public static envVars: any

  public static forRoot(environment: any): ModuleWithProviders {
    // this is to provide to this module non-class section
    this.envVars = environment

    // this is provide to children
    return {
      ngModule: GraphQLModule,
      providers: [
        {
            provide: 'envVars', 
            useValue: environment
        }
      ]
    }
  }
}

现在我可以在这个实际模块本身中静态使用它，或者通过@Inject 在使用这个模块的任何子组件或模块中使用它。

所以在这个实际的模块中我可以这样做：

GraphQLModule.envVars.gatewayUri

或者在另一个类的构造函数中，我可以这样做：

constructor(@Inject('envVars') private envVars: any) {}

享受吧！

【讨论】：