How do you manage multiple graphql modules in Apollo-Angular?

Question

At work we are building a large project that leverages libraries made by different teams. We are running into an issue with Apollo-Angular, in that when importing a single module with its own graphql module with APOLLO_NAMED_OPTIONS, it runs correctly. However if the particular application needs to import multiple modules with their own graphql modules, it seems as though something is colliding. We get an error where only the named options from a single file are loaded, leaving many of the services and components broken with errors of missing graphql names.

I made a Stackblitz to demonstrate the basic flaw, but the other graphql modules are coming bundled with other components and libraries, not side-by-side as in my Stackblitz example.

GraphQL Module #1:

import { NgModule } from '@angular/core';
import { APOLLO_NAMED_OPTIONS, NamedOptions } from 'apollo-angular';
import { InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';

@NgModule({
  providers: [
    {
      provide: APOLLO_NAMED_OPTIONS,
      useFactory(httpLink: HttpLink): NamedOptions {
        return {
          appList: {
            cache: new InMemoryCache(),
            link: httpLink.create({
              uri: 'https://graphql-voter-app.herokuapp.com/";',
            }),
            defaultOptions: {
              query: {
                fetchPolicy: 'no-cache',
              },
              watchQuery: {
                fetchPolicy: 'no-cache',
              },
            },
          },
        };
      },
      deps: [HttpLink],
    },
  ],
})
export class AppListGraphQLModule {}

GraphQL Module #2:

import { NgModule } from '@angular/core';
import { APOLLO_NAMED_OPTIONS, NamedOptions } from 'apollo-angular';
import { InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';

@NgModule({
  providers: [
    {
      provide: APOLLO_NAMED_OPTIONS,
      useFactory(httpLink: HttpLink): NamedOptions {
        return {
          switchFauna: {
            cache: new InMemoryCache(),
            link: httpLink.create({
              uri: 'https://graphql-voter-app.herokuapp.com/',
            }),
            defaultOptions: {
              query: {
                fetchPolicy: 'no-cache',
              },
              watchQuery: {
                fetchPolicy: 'no-cache',
              },
            },
          },
        };
      },
      deps: [HttpLink],
    },
  ],
})
export class GameGraphQLModule {}

Stackblitz:

https://stackblitz.com/edit/simple-apollo-angular-example-njqnwm?devtoolsheight=33&file=app/applist-gql.module.ts

In the example, only one named option from one graphql module can be found.

score 0 · Answer 1 · answered Oct 07 '21 at 10:59

After scouring the internet, reading multiple websites and documentation examples, I think I figured it out. The Stackblitz above is now updated, and it works.

In the library, each graphql module should be redefined as:

@NgModule({
  exports: [HttpClientModule],
})
export class AppListGraphQLModule {
  constructor(apollo: Apollo, httpLink: HttpLink) {
    apollo.create(
      {
        link: httpLink.create({
          uri: 'https://graphql-voter-app.herokuapp.com/',
        }),
        cache: new InMemoryCache(),
        defaultOptions: {
          query: {
            fetchPolicy: 'no-cache',
          },
          watchQuery: {
            fetchPolicy: 'no-cache',
          },
        },
      },
      'appList'
    );
  }
}

It still allowed multiple named endpoints to be included, you just need a separate client for each one.

Example:

...

export class ExampleGraphQLModule {
  constructor(apollo: Apollo, httpClient: HttpClient) {
    apollo.create({ ...optionsHere }, 'namedEndpoint1');
    apollo.create({ ...optionsHere }, 'namedEndpoint2');
  }
}

How do you manage multiple graphql modules in Apollo-Angular?

1 Answers1