Angular application freeze when I'm using resolver and apollo graphQL implementation

Question

I am trying to fetch data from graphQL when I route my application to a component. Here is my code :

My service :

@Injectable()
export class MyService {
    constructor(public apollo: Apollo) {}

    getSomething() {
        return this.apollo.watchQuery({
            query: gql`
            {
                someThing {
                    id,
                    label
                }
            }`
        })
    }
}

My resolver :

@Injectable()
export class MyResolver implements Resolve<any> {
    constructor(private myService: MyService) {}
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
        return this.myService.get()
    }
}

My module :

const myRoutes: Routes = [
    ...,
    { path: 'deb', component: MyComponent, resolve: {something: MyResolver} }
    ...
]

@NgModule({
        imports: [
            ...
            RouterModule.forChild(myRoutes),
            ...
        ],
        declarations: [
            MyComponent
        ],
        providers: [
            MyResolver,
            MyService
        ],
        exports: [
            ...
        ]
})
export class MyModule {}

And my component, for now, do nothing. All work well before I added this resolver. Currently the page does not load.

I tried several things on my resolver like this :

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    return this.myService.get()
}

=> Display the log, but the page does not load.

And like this :

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    return "toto"
}

=> This works, and the page is loaded.

I have tested my graphQL request without resolver and it works. I'm pretty sure there is something wrong with the apollo impementation and angular resolver. Can anyone help me in this matter ?

Answer 1

There are two ways of fetching data in Angular Apollo integration, watchQuery() and query().

Both of them return an Observable with the result, but there's a significant difference between them.

watchQuery() Returns an Observable and after passing the data, it does not complete. It is still open for new data, so when you update the store the new result hits the Subscription.

apollo.watchQuery(options).subscribe({
    next: (data) => console.log('data', data),
    complete: () => console.log('off');
});

// You get:
data [Object object]
data [Object object]
data [Object object]
...

query() Returns an Observable but it completes after passing data.

apollo.query(options).subscribe({
    next: (data) => console.log('data', data),
    complete: () => console.log('off');
});

// You get:
data [Object object]
off

To summarize: the Router waits for the Observable to complete but it doesn't happen.