angular - apollo.watchQuery 结果为 'ERROR TypeError: Object(...) is not a function'

Question

我目前正在使用 Angular (5) 和 GraphQL 做一些基本的事情，我在调用 watchQuery 方法时遇到了一些问题。调用该方法后，我的组件崩溃并返回以下错误:

错误 TypeError: Object(...) 不是函数

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

• apollo-angular: ^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)

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

Answer 1

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

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

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