Router Resolve does not work with Apollo

I’m trying to use apollo.watchQuery to resolve data in router:

import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import { DocumentNode } from 'graphql';
import gql from 'graphql-tag/index';

import { Account } from '../../models/account';

const accountResolverQuery: DocumentNode = gql`
  query AccountResolverQuery($accountId: String!) {
    account(id: $accountId) {
      id
      name
      address {
        city
        line1
        line2
        postalCode
        region
      }
    }
  }
`;

interface AccountResolverQueryResponse {
  account: Account;
}

@Injectable()
export class AccountResolver implements Resolve<Account> {
  constructor(private apollo: Apollo) {
  }

  resolve(route: ActivatedRouteSnapshot): Observable<Account> {
    const accountId = route.params['id'];

    return this.apollo
      .watchQuery<AccountResolverQueryResponse>({
        query: accountResolverQuery,
        variables: {
          accountId,
        },
      })
      .map(({ data }: { data: AccountResolverQueryResponse }) => data.account);
  }
}

But it just does not work. Apollo makes request, but navigation just does nothing. Any other observable works (like using REST).

[kamilkisiela]

@longuniquename There is a different between watchQuery and query methods. Second one behaves the same as those from Angular’s Http service.

What I mean by that?

With query() you fetch data, receive the result, then an Observable completes. With watchQuery() you fetch data, receive the result and an Observable is keep opened for new emissions so it never completes.

Try to use query() instead of watchQuery in this kind of scenarios.

[longuniquename]

@kamilkisiela It worked! Thank you, for your help and for your work 😃