Upgrading to version 2 gives "Client has not been defined yet" in a project with apollo-angular lazy loaded

[alexbjorlig]

I am trying to upgrade a project from version 1 to 2. No errors when I serve the Angular project, but when the first route resolver tries to get data, I get the error Client has not been defined yet.

I tried looking in the documentation for lazyloading Graphql modules but did not find anything 😅 I hope you can help me in the right direction.

We are lazy loading the apollo module, here is the before and after example:

before

import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { UtilitiesService } from '../../../shared/services/utility/utilities.service';
import { AuthService } from '../auth/services/auth.service';
import { concatAllLinks } from './apollo-links/concat-all-links';
import { ErrorHandlingService } from '../../../shared/services/error/error-handling.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { createCache } from './apollo-cache';
import { resolvers } from './resolvers';
import { typeDefs } from './client-schema';
import { environment } from '../../../../environments/environment';
import { GraphqlLazyServiceModule } from '../graphql-lazy-service/graphql-lazy-service.module';

export function createApollo(
    httpLink: HttpLink,
    utilities: UtilitiesService,
    authSer: AuthService,
    errSer: ErrorHandlingService,
    snackBar: MatSnackBar
) {
    const { revision } = environment.versions;
    return {
        typeDefs,
        link: concatAllLinks(httpLink, utilities, authSer, errSer, snackBar),
        cache: createCache(),
        resolvers: resolvers,
        name: 'Angular Eddy Application',
        version: revision,
    };
}

@NgModule({
    exports: [ApolloModule, HttpLinkModule],
    // This nested module, removes a circular dependency warning when we actually import
    // typing generated by graphql-codegen.
    imports: [GraphqlLazyServiceModule],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [
                HttpLink,
                UtilitiesService,
                AuthService,
                ErrorHandlingService,
                MatSnackBar,
            ],
        },
    ],
})
export class GraphqlModule {}

after

import { APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { NgModule } from '@angular/core';

import { UtilitiesService } from '../../../shared/services/utility/utilities.service';
import { AuthService } from '../auth/services/auth.service';
import { concatAllLinks } from './apollo-links/concat-all-links';
import { ErrorHandlingService } from '../../../shared/services/error/error-handling.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { createCache } from './apollo-cache';
import { resolvers } from './resolvers';
import { typeDefs } from './client-schema';
import { environment } from '../../../../environments/environment';
import { GraphqlLazyServiceModule } from '../graphql-lazy-service/graphql-lazy-service.module';
import { HttpClientModule } from '@angular/common/http';

export function createApollo(
    httpLink: HttpLink,
    utilities: UtilitiesService,
    authSer: AuthService,
    errSer: ErrorHandlingService,
    snackBar: MatSnackBar
) {
    const { revision } = environment.versions;
    console.log('I was called') // <== This never prints... 
    return {
        typeDefs,
        link: concatAllLinks(httpLink, utilities, authSer, errSer, snackBar),
        cache: createCache(),
        resolvers: resolvers,
        name: 'Angular Eddy Application',
        version: revision,
    };
}

@NgModule({
    exports: [],
    // This nested module, removes a circular dependency warning when we actually import
    // typing generated by graphql-codegen.
    imports: [GraphqlLazyServiceModule, HttpClientModule],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [
                HttpLink,
                UtilitiesService,
                AuthService,
                ErrorHandlingService,
                MatSnackBar,
            ],
        },
    ],
})
export class GraphqlModule {}

[alexbjorlig]

Hi @kamilkisiela - I know you are probably super busy, but do you have any hints here? Is it supported to configure Apollo in a lazy loaded module at all?