What is the correct return type of Apollo's watchQuery().valueChanges for GraphQL in Angular?

Question

We are using Apollo Angular to connect to a GraphQL API. This works fine. I now wanted to create an API service that abstracts the watchQuery method.

This works fine until I add the return type to the method. The type hint says the return type of valueChanges is Observable<ApolloQueryResult<any>>. But when I add it as the function's return type I get this error:

Property '['@@observable']' is missing in type 'Observable<ApolloQueryResult>' but required in type 'Observable'.

The suggestions for imports are these three - but none worked and resulted in the same error:

import { ApolloQueryResult } from '@apollo/client/core/types';
import { ApolloQueryResult } from '@apollo/client/core';
import { ApolloQueryResult } from '@apollo/client';

This is how the service looks like:

import { Injectable } from '@angular/core';

import { Apollo, WatchQueryOptions } from 'apollo-angular';
import { ApolloQueryResult } from '@apollo/client/core/types';

@Injectable({
  providedIn: 'root'
})

export class ApiService {
  constructor(
    private apollo: Apollo
  ) { }

  watchQuery(options: WatchQueryOptions<any>): Observable<ApolloQueryResult<any>> {
    return this.apollo.watchQuery<any>(options).valueChanges;
  }
}

Answer 1

tl;dr: Make sure you add import { Observable } from 'rxjs'; to your service.

---

In apollo-angular, valueChanges returns type Observable from rxjs (link to source).

However, if you Go to Definition on the Observable declared in your service, it takes you to something @apollo/client adds as a global type (link to source).

Now, I don't understand exactly what this global ambient declaration is for. But by not importing the real Observable from rxjs in your file, your service is declared to return the global @apollo/client one, while actually returning the rxjs one.