Question

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

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

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

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

我有一个带有一些导入和链接的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，则可能是因为您在问题中引用的版本取决于RxJS6。您有两种解决方案：

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

请勿尝试升级到RxJS 6并停留在Angular 5，您会遇到更多问题。

Answer 2

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

Answer 3

发生此问题是因为RxJS v5和v6之间不匹配。

Apollo v1.1.0和更高版本支持Angular 6+和RxJS 6 +
Apollo之前的v1.1.0可在Angular 5和RxJS 5上运行。

如果遇到问题，我们强烈建议升级到RxJS6。我们在几个大型项目中都完成了工作，没有任何问题。

如果您无法升级，则坚持使用阿波罗角1.0.X版。

apollo.watchQuery导致错误类型错误：对象（...）不是函数＆＃39;

3 个答案: