angularapollo-clientapollo-angular

Connect an Angular app to multiple Apollo clients


Following the Apollo Angular docs, I applied this configuration to connect to a given graphql endpoint:

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 {}

Is it possible to use this same configuration to connect to another graphql endpoint?

There is this section in the docs that shows how to use multiple clients, but I don't see how I can apply it with apollo-angular-link-http

Thanks.


Solution

  • I have a working solution by changing the initial configuration and following the second link about implementing multiple clients:

    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()
        });
      }
    }
    
    

    The second client can then be used like this:

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