将 Angular 应用程序连接到多个 Apollo 客户端

Question

在 Apollo Angular docs 之后，我应用此配置连接到给定的 graphql 端点：

import { HttpClientModule } from "@angular/common/http";
import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular";
import { HttpLinkModule, HttpLink } from "apollo-angular-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    ApolloModule,
    HttpLinkModule
  ],
  providers: [{
    provide: APOLLO_OPTIONS,
    useFactory: (httpLink: HttpLink) => {
      return {
        cache: new InMemoryCache(),
        link: httpLink.create({
          uri: "https://my.endpoint.io/graphql"
        })
      }
    },
    deps: [HttpLink]
  }],
})
export class AppModule {}

是否可以使用相同的配置连接到另一个 graphql 端点？

文档中有 this section 显示如何使用多个客户端，但我不知道如何将其应用到 apollo-angular-link-http

谢谢。

Answer 1

我有一个可行的解决方案，方法是更改初始配置并遵循 the second link 实施多个客户端：

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpHeaders } from '@angular/common/http';
import { Apollo, ApolloModule } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

@NgModule({
  imports: [
    HttpClientModule,
    ApolloModule,
    HttpLinkModule
  ]
})
export class GraphQLModule {

  private readonly URI1: string = 'http://first.endpoint.io/graphql';
  private readonly URI2: string = 'http://second.endpoint.io/graphql';

  constructor(
    apollo: Apollo,
    httpLink: HttpLink
  ) {
    const options1: any = { uri: this.URI1 };
    apollo.createDefault({
      link: httpLink.create(options1),
      cache: new InMemoryCache()
    });

    const options2: any = { uri: this.URI2 };
    apollo.createNamed('endpoint2', {
      link: httpLink.create(options2),
      cache: new InMemoryCache()
    });
  }
}

第二个客户端可以这样使用：

apollo.use('endpoint2').watchQuery({...});

Answer 2

如果你想使用providers with useFactory

import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS, APOLLO_NAMED_OPTIONS } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClientOptions } from 'apollo-client';

const defaultUri= 'http://default.endpoint.io/graphql';
const secondUri = 'http://second.endpoint.io/graphql';
const thirdUri = 'http://third.endpoint.io/graphql';

export function createDefaultApollo(httpLink: HttpLink): ApolloClientOptions<any> {
    return {
        link: httpLink.create({ uri: defaultUri }),
        cache: new InMemoryCache()
    };
}

export function createNamedApollo(httpLink: HttpLink): Record<string, ApolloClientOptions<any>> {
    return {
        second: {
            name: 'second',
            link: httpLink.create({ uri: secondUri }),
            cache: new InMemoryCache()
        },
        third: {
            name: 'third',
            link: httpLink.create({ uri: thirdUri }),
            cache: new InMemoryCache()
        }
    };
}

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

用法：

apollo.use('second').watchQuery({...} });

将 Angular 应用程序连接到多个 Apollo 客户端

Connect an Angular app to multiple Apollo clients

angular

apollo-client

apollo-angular