Apollo-angular: Using named apollo clients

[MaximS]

1. How to create several named clients (like in https://www.apollographql.com/docs/angular/features/multiple-clients.html) but using dependency injection (like in https://www.apollographql.com/docs/angular/basics/setup.html)?

2. How to setup Query (src/Query.ts) to use a named client (other way than assigning its client property after it's already created)? Some directive like @ApolloName("additionalClinet") would be very useful.

[kamilkisiela]

1. We don't recommend using multiple clients and that's why it's not supported everywhere. It's a bad practice and pretty much every use case could be solved within an Apollo Link.

2. Take a look here

export class YourQuery extends Query {
  client = 'custom'
}

[MaximS]

Query subclass is OK.
But the general recommendation against multiple clients shoud probably be mentioned in the docs.

[intellix]

@kamilkisiela I know this isn't for support queries but am just wondering how you could solve something using links.

• Backend/API is currently using 1x endpoint
• CMS data comes from GraphCMS

My understanding would be that I could create 2x named clients: default and cms but with link I've no idea how I could solve it.

[havran]

I have same use case as @intellix. I want to create library which provide CMS content for angular application (which possible can use apollo client too).

I read comments here: https://spectrum.chat/apollo/angular-apollo/trying-to-test-a-service-with-a-non-default-endpoint~b4e338bf-78fa-4cf2-8470-d26f1122bee4 (i use named client and try create tests).

Recommendation is use uri as function, but (if i understand correctly), this can be used if i want build library because library don't know how is apollo client configured in application.

[havran]

I realize if i use Query i still can test this with ApolloTestingModule, because there is no support for named client. I try implement this in to module (but i probably not fully understand how this work).

[code-vagabond]

In case someone still struggles with this, the trick is to declare multiple Apollo links using the split() function:

In your graphql.module.ts

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
  return {
    link: ApolloLink.split(
      operation => operation.getContext().clientName === 'second',
      httpLink.create({ secondURI })),
      httpLink.create({ firstURI })),
    cache: new InMemoryCache(),
  };
}


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

Declare context inside query to use the second link:

this.apollo.query({
      query: YOUR_QUERY,
      context: { clientName: 'second' }
    })

[jadurani]

In case someone still struggles with this, the trick is to declare multiple Apollo links using the split() function:

In your graphql.module.ts

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
  return {
    link: ApolloLink.split(
      operation => operation.getContext().clientName === 'second',
      httpLink.create({ secondURI })),
      httpLink.create({ firstURI })),
    cache: new InMemoryCache(),
  };
}


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

Declare context inside query to use the second link:

this.apollo.query({
      query: YOUR_QUERY,
      context: { clientName: 'second' }
    })

What if you have 5 microservices 😅