Catch the highlights of GraphQLConf 2023! Click for recordings. Or check out our recap blog post.
v3 (latest)
Recipes
Multiple Clients

Multiple Clients

With apollo-angular it is possible to use multiple Apollo Clients in your application.

Creating Clients

You are already familiar with how to create a single client so it should be easy to understand it.

There are few ways of creating named clients.

One way is to use Apollo.create. Normally, you would use it like this:

apollo.create(options);

This will define a default client but there is one optional argument.

apollo.create(options, name /* optional */);

An example:

apollo.create(defaultOptions);
apollo.create(extraOptions, 'extra');

Now you have the default client and one called extra.

⚠️

If you want to define a default client, simply do not use any name argument or set it to default.

The other way is to use helper methods.

apollo.createDefault(options);
// and
apollo.createNamed(name, options);

Creating Clients Using APOLLO_NAMED_OPTIONS

In our app.module.ts file use ApolloModule and APOLLO_NAMED_OPTIONS token to configure Apollo Client:

app.module.ts
import { APOLLO_NAMED_OPTIONS, ApolloModule, NamedOptions } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { HttpClientModule } from '@angular/common/http';
import { InMemoryCache } from '@apollo/client/core';
 
@NgModule({
  imports: [BrowserModule, ApolloModule, HttpClientModule],
  providers: [
    {
      provide: APOLLO_NAMED_OPTIONS, // <-- Different from standard initialization
      useFactory(httpLink: HttpLink): NamedOptions {
        return {
          default: /* <-- This settings will be saved as default client */ {
            cache: new InMemoryCache(),
            link: httpLink.create({
              uri: 'https://o5x5jzoo7z.sse.codesandbox.io/graphql',
            }),
          },
          newClientName: /* <-- These settings will be saved by name: newClientName */ {
            cache: new InMemoryCache(),
            link: httpLink.create({
              uri: 'https://o5x5jzoo7z.sse.codesandbox.io/graphql',
            }),
          },
        };
      },
      deps: [HttpLink],
    },
  ],
})
export class AppModule {}

Using Apollo

Since we have our clients available in an app, now is the time to see how to use them.

If a client is defined as the default, you can directly use all methods of the Apollo service.

About named clients, simply use the method called use(name: string).

import { Apollo, QueryRef } from 'apollo-angular';
import { Component } from '@angular/core';
 
@Component({
  // ...
})
export class AppComponent {
  feedQuery: QueryRef<any>;
 
  constructor(apollo: Apollo) {
    // use default
    this.feedQuery = apollo.watchQuery({
      /* ... */
    });
 
    // use extra client
    this.feedQuery = apollo.use('extra').watchQuery({
      /* ... */
    });
  }
}