apollo-angular - Get an error "Cannot read properties of undefined (reading 'query')" when load the module by module federation

Question

Hi (posted also as an issue at apollo-angular but there is no response for a long time)

I'm using @angular-architects/module-federation to split the code into micro frontends and I'm trying to use typescript-apollo-angular for autogenerating code from a GraphQL schema/s.

I'm using named client in my MFE to support multiple clients. The module (module1) that use Apollo is configured like that:

HttpClientModule
    ApolloModule],
  providers:
  [
    {
      provide: APOLLO_NAMED_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          client1: {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: myUrl,
          }),
        }};
      },
      deps: [HttpLink],
    }
  ]

I'm using the named client on the query like that: query myQuery{ data @namedClient(name: "client1") ..... and use it like that:

this.apollo.watchQuery({
      query: <reference to query....>,
    }).valueChanges.subscribe(res=><handle the data..>)

When I run the MFE by itself, it bootstrapped by the app.module of the MFE load module1 and the ApolloModule and it works. When I load module1 using @angular-architects/module-federation, the app.module of the shell import the ApolloModule but there is an error:

ERROR TypeError: Cannot read properties of undefined (reading 'query')
    at myQueryGQL.fetch (ngApollo.mjs:347:16)
    at MyComponent.ngOnInit (my-component.component.ts:86:43)
    at callHook (core.mjs:2498:22)
    at callHooks (core.mjs:2467:17)
    at executeInitAndCheckHooks (core.mjs:2418:9)
    at refreshView (core.mjs:11992:21)
    at refreshEmbeddedViews (core.mjs:13027:17)
    at refreshView (core.mjs:12001:9)
    at refreshComponent (core.mjs:13073:13)
    at refreshChildComponents (core.mjs:11767:9)

Another try

I've also tried to solve it by replacing the myQueryGQL with apollo code like that -

export class MyService {
private apollo: ApolloBase;

    constructor(private apolloProvider: Apollo) {
        this.apollo = this.apolloProvider.use('client1');
    }
getData(...){
this.apollo.watchQuery({
                query: MyDocument,
                variables:{...}
            }).valueChanges.subscribe(res=><handle the data>);
}
}

When I used this syntax it works by making the call through a component of the MFE but when I make the call at a service at the MFE I got the error:

ERROR TypeError: Cannot read properties of undefined (reading 'watchQuery')
    at MyService.getData (myService.service.ts:39:40)
    at MyComponentComponent.ngOnInit (my-component.component.ts:86:8)
    at callHook (core.mjs:2498:22)
    at callHooks (core.mjs:2467:17)
    at executeInitAndCheckHooks (core.mjs:2418:9)
    at refreshView (core.mjs:11992:21)
    at refreshEmbeddedViews (core.mjs:13027:17)
    at refreshView (core.mjs:12001:9)
    at refreshComponent (core.mjs:13073:13)
    at refreshChildComponents (core.mjs:11767:9)

Environment:

+-- @angular/cli@14.1.3

+-- @angular/core@14.1.3

+-- @apollo/client@3.6.9

+-- apollo-angular@4.0.1

+-- graphql@15.8.0

`-- typescript@4.7.4

apollo-angular - Get an error "Cannot read properties of undefined (reading 'query')" when load the module by module federation

0 Answers0