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

Posted 2023-03-10

【中文标题】将 Angular 应用程序连接到多个 Apollo 客户端

【英文标题】：Connect an Angular app to multiple Apollo clients

【发布时间】：2019-10-06 07:48:06

【问题描述】：

按照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 应用它

谢谢。

【参考方案1】：

如果你想使用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(... );

【讨论】：

太谢谢你了，我什至不知道你是怎么得到这个信息的！

@Deunz 我很想知道你是如何解决业力测试的。我正在为此苦苦挣扎一个星期。谢谢！

你好 Sherbi，我很抱歉，但我无法找回我所做的开发，因为我们放弃了拥有 2 个 graphQL 端点的演变......如果我能找到它，我会继续搜索跨度>

删除了评论，以后注意：热的时候总是完整的回答！对不起谢尔比:(

@Deunz 该死的..:( 非常感谢您花时间搜索它。我尝试在网上搜索，但我似乎找不到任何关于测试这个多客户端东西的资源，以及他们的文档提供 + 示例似乎并没有削减它。

【参考方案2】：

我通过更改初始配置并遵循 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(...);