Angular 中 GraphQL 的 Apollo 的 watchQuery().valueChanges 的正确返回类型是啥？

Posted 2023-03-10

【中文标题】Angular 中 GraphQL 的 Apollo 的 watchQuery().valueChanges 的正确返回类型是啥？

【英文标题】：What is the correct return type of Apollo's watchQuery().valueChanges for GraphQL in Angular?Angular 中 GraphQL 的 Apollo 的 watchQuery().valueChanges 的正确返回类型是什么？

【发布时间】：2021-05-22 11:57:15

【问题描述】：

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

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

“Observable”类型中缺少属性“['@@observable']'，但在“Observable”类型中是必需的。

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

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;
  

【问题讨论】：

您可以让 typescript 推断返回类型，例如删除 : Observable<ApolloQueryResult<any>>。一旦知道正确的返回类型，您就可以将其添加回来

是的，我现在在any 上，@MikeS。

【参考方案1】：

tl;dr：确保将 import Observable from 'rxjs'; 添加到您的服务中。

---

在 apollo-angular 中，valueChanges 从 rxjs (link to source) 返回类型 Observable。

但是，如果您在服务中声明的 Observable 上转到定义，它会将您带到 @apollo/client 添加为全局类型（@ 987654322@).

现在，我不明白这个全局环境声明的确切用途。但是，通过不在您的文件中从 rxjs 导入真正的 Observable，您的服务被声明为返回全局 @apollo/client 之一，而 实际上 em> 返回 rxjs 一个。