Apollo Angular
On this page

Multiple Clients

Learn to use multiple Apollo clients in your Angular application with @apollo_angular. Create named clients and configure using `provideNamedApollo()` token.

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.

The other way is to use helper methods.

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

Creating Clients Using provideNamedApollo()

In our app.config.ts file use provideNamedApollo() token to configure Apollo Client:

app.config.ts
import { provideNamedApollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { inject } from '@angular/core';
import { InMemoryCache } from '@apollo/client';

provideNamedApollo(() => {
  const httpLink = inject(HttpLink);

  return {
    //  These settings will be saved as default client
    default: {
      link: httpLink.create({
        uri: '/graphql',
      }),
      cache: new InMemoryCache(),
    },
    // These settings will be saved by name: myAlternativeGraphQl
    myAlternativeGraphQl: {
      link: httpLink.create({
        uri: '/alternative-graphql',
      }),
      cache: new InMemoryCache(),
    },
  };
});

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, 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('myAlternativeGraphQl').watchQuery({/* ... */});
  }
}