apollo.watchQuery 导致 'ERROR TypeError: Object(...) is not a function'答案

【问题标题】：apollo.watchQuery results in 'ERROR TypeError: Object(...) is not a function'apollo.watchQuery 导致 'ERROR TypeError: Object(...) is not a function'
【发布时间】：2018-11-13 00:29:19
【问题描述】：

我目前正在使用 Angular (5) 和 GraphQL 处理一些基本的东西，并且在调用 watchQuery 方法时遇到了一些问题。一旦我调用该方法，我的组件就会崩溃并返回以下错误：

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

我已在网上搜索解决方案，但找不到合适的解决方案。我的环境包含以下库：

阿波罗角度：^1.1.0
apollo-angular-link-http: ^1.1.0
apollo-cache-inmemory：^1.2.2
apollo 客户端：^2.3.2
graphql：^0.13.2
graphql 标记：^2.9.2
rxjs: ^5.5.6

我有一个带有一些导入和链接的 sharedModule：

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

我的列表组件中有以下代码：

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));
}

完整的错误包含以下几行到我的代码：

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)

如果有人有任何建议或问题，请告诉我。

【问题讨论】：

你有没有试过这个最小的例子？ apollographql.com/docs/angular/basics/queries.html#rxjs也许你可以从那里拿走……
谢谢！明天上班的时候看看。
遇到了同样的问题并按照@user3270598 的建议降级到 v1.0.1。这为我们解决了问题。在 repo 中添加了一个问题 github.com/apollographql/apollo-angular/issues/651

标签： angular rxjs graphql apollo

【解决方案1】：

出现问题是因为 RxJS v5 和 v6 不匹配。

Apollo v1.1.0 及更新版本支持 Angular 6+ 和 RxJS 6+
Apollo v1.1.0 之前的版本适用于 Angular 5 和 RxJS 5。

如果您遇到此问题，我们强烈建议您升级到 RxJS 6。我们在几个大型项目中都没有任何问题。

如果您无法升级，请坚持使用 apollo-angular 的 1.0.X 版本。

【讨论】：

【解决方案2】：

如果您使用的是 Angular 5，这可能是因为您在问题中引用的版本取决于 RxJS 6。您有两种解决方案：

升级到 Angular 6 AND RxJS 6
将 Apollo Angular 包降级到依赖 RxJS 5 的 1.0.1 版本

不要尝试升级到 RxJS 6 并停留在 Angular 5，你会遇到更多问题。

【讨论】：

【解决方案3】：

你应该尝试降级grapqh和graphql-tag

【讨论】：

您会推荐哪些版本？