0

遵循Apollo Angular 设置

src/app/graphql.module.ts

import { NgModule } from '@angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions, InMemoryCache, createHttpLink } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';

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

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

这为我们提供了一个硬编码的 URI 变量，它显然不能在本地开发之外工作。我希望能够通过在运行时加载配置文件来更改 URI，而不是构建时间（即不使用 environment.ts）。在使用 Angular 阅读运行时环境配置之后，这似乎是一种合理的方法。

资产/config.json

将在部署时覆盖的本地开发的默认配置

{
  "apiUrl": "http://localhost:3000/graphql"
}

src/app/app-config.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface AppConfig {
  apiUri: string;
}

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {
  private appConfig: AppConfig;
  private http: HttpClient;

  constructor(http: HttpClient) {
    this.http = http;
  }

  async loadAppConfig() {
    this.appConfig = await this.http.get('/assets/config.json')
      .toPromise() as AppConfig;
  }

  public get apiUri() {
    return this.appConfig.apiUri;
  }
}

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GraphQLModule } from './graphql.module';
import { AppConfigService } from './app-config.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, GraphQLModule, HttpClientModule],
  providers: [
    {
      provide : APP_INITIALIZER,
      multi : true,
      deps : [AppConfigService],
      useFactory : (appConfigService : AppConfigService) =>  () => appConfigService.loadAppConfig()
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

所以我的问题是，我如何使用AppConfigServiceinGraphQLModule来获取工厂函数apiUrl并将其设置为uri工厂createApollo函数？

4

3 回答 3

0 
import {NgModule} from '@angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import {ConfigService} from './config.service';

export function createApollo(
  httpLink: HttpLink,
  configService: ConfigService
): ApolloClientOptions<any> {
  return {
    link: httpLink.create({uri: configService.apiUri}),
    cache: new InMemoryCache(),
  };
}

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, ConfigService],
    },
  ],
})
export class GraphQLModule {}
于 2021-12-21T02:09:15.307 回答
0

您是否尝试过使用代理？这将允许您在运行应用程序之前设置要指向的主机。

于 2020-11-14T21:15:41.350 回答
0

APP_INITIALIZER 令牌在您的应用程序开始时被调用，这是设置 apollo 客户端的最佳位置，但是尽管官方的apollo-angular 文档建议使用 APOLLO_OPTIONS 令牌，但如果您需要以异步方式设置客户端我建议在您的承诺的 map 函数中使用apollo.create方法：

src/app/app.module.ts

@NgModule({
  ...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (appConfigService: AppConfigService, apollo: Apollo, httpLink: HttpLink) =>
        () => appConfigService.loadAppConfig()
          .pipe(
            map((appConfig: AppConfig) => {
              apollo.create({
                link: httpLink.create({
                  uri: appConfig.apiUrl,
                }),
                cache: new InMemoryCache(),
              });
            })
          ).toPromise(),
      deps: [AppConfigService, Apollo, HttpLink],
      multi: true
    },
  ],
  ...
})
export class AppModule {
}
于 2021-04-29T12:56:39.777 回答