Angular 中 GraphQL 的 Apollo watchQuery().valueChanges 的正确 return 类型是什么？

Question

我们正在使用 Apollo Angular 连接到 GraphQL API。这很好用。我现在想创建一个 API 服务来抽象 watchQuery 方法。

在我将 return 类型添加到该方法之前，它工作正常。类型提示说 valueChanges 的 return 类型是 Observable<ApolloQueryResult<any>>。但是当我将它添加为函数的 return 类型时，我得到了这个错误：

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

导入的建议是这三个 - 但 none 有效并导致相同的错误：

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

服务是这样的：

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：确保将 import { Observable } from 'rxjs'; 添加到您的服务中。

在 apollo-angular 中，valueChanges returns 从 rxjs[= 输入 Observable 34=] (link to source).

但是，如果您 转到服务中声明的 Observable 上的定义 ，它会将您带到某些地方 @apollo/client 添加为全局类型 (link to source)。

现在，我不明白这个全局环境声明到底是干什么用的。但是，通过不在文件中从 rxjs 导入真正的 Observable，您的服务被声明为 return 全局 @apollo/client 一个，而 实际上 return 使用 rxjs 一个。

Angular 中 GraphQL 的 Apollo watchQuery().valueChanges 的正确 return 类型是什么？

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

rxjs

typescript

apollo

apollo-client

angular