apollo.watchQuery results in 'ERROR TypeError: Object(...) is not a function'

Question

I am currently working on some basic stuff with Angular (5) and GraphQL and I am running into some issues with calling calling the watchQuery method. Once i call the method my component crashes and returns me with the following error:

ERROR TypeError: Object(...) is not a function

I have searched the web for a solution but i couldn't find a proper one. My environment contains the following libraries:

• apollo-angular: ^1.1.0
• apollo-angular-link-http: ^1.1.0
• apollo-cache-inmemory: ^1.2.2
• apollo-client: ^2.3.2
• graphql: ^0.13.2
• graphql-tag: ^2.9.2
• rxjs: ^5.5.6

I have a sharedModule with some of the imports and the link:

export class SharedModule {
  constructor(apollo: Apollo, httpLink: HttpLink) {
    apollo.create({
      link: httpLink.create({uri: 'baseUri/graphql'}),
      cache: new InMemoryCache()
    });
  }
}

And i have the following code inside my list component:

getMovies() {
  this.movies = this.apollo.watchQuery<Query>({    // <= where my error occurs
    query: gql`
      query {
        movies {
          id
          title
          genres
        }
      }
    `
  })
    .valueChanges
    .pipe(map((result) => result.data.movies));
}

the complete error contains the following lines up to my code:

ERROR TypeError: Object(...) is not a function
   at new QueryRef (QueryRef.js:6)
   at ApolloBase.watchQuery (Apollo.js:30)
   at MovieListComponent.getMovies (movie-list.component.ts:37)
   at MovieListComponent.ngOnInit (movie-list.component.ts:29)

If anyone has suggestions or questions, please let me know.

Answer 1

If you're using Angular 5, this is likely because the versions you referenced in your question depend on RxJS 6. You have two solutions:

• Upgrade to Angular 6 AND RxJS 6
• Downgrade Apollo Angular packages to the 1.0.1 versions that depend on RxJS 5

Do not attempt to upgrade to RxJS 6 and stay at Angular 5, you will run into more issues.