Angular中Apollo的watchQuery().valueChanges的正确返回类型及类型错误解决

这个错误的核心原因是Observable类型不匹配——你没有显式导入RxJS的Observable，导致TypeScript解析了错误的Observable类型（比如Apollo内部的Observable接口，和RxJS的实现不兼容），所以才会出现Property '['@@observable']' is missing的提示（这个属性是RxJS Observable特有的标识）。

正确的返回类型 #

watchQuery().valueChanges的正确返回类型是RxJS的Observable<ApolloQueryResult<T>>，其中T是你的查询数据对应的类型（推荐用泛型代替any，获得更好的类型提示）。

修复步骤 #

1. 导入RxJS的Observable：这是关键，必须明确导入RxJS提供的Observable类型。
2. 优化泛型定义：用泛型T代替any，让服务方法支持类型约束，调用时可以指定具体的数据类型。
3. 简化ApolloQueryResult的导入：从@apollo/client直接导入即可，无需深入到内部路径。

修正后的服务代码 #

import { Injectable } from '@angular/core';
import { Apollo, WatchQueryOptions } from 'apollo-angular';
import { Observable } from 'rxjs'; // 必须导入RxJS的Observable
import { ApolloQueryResult } from '@apollo/client';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private apollo: Apollo) { }

  // 用泛型T来约束输入输出的类型，替代any
  watchQuery<T = any>(options: WatchQueryOptions<T>): Observable<ApolloQueryResult<T>> {
    return this.apollo.watchQuery<T>(options).valueChanges;
  }
}

额外优化建议 #

调用这个服务方法时，建议指定具体的泛型类型，这样TypeScript会自动推导返回数据的类型，提升开发体验：

// 假设你有一个定义好的查询数据类型MyQueryData
this.apiService.watchQuery<MyQueryData>({
  query: YOUR_GRAPHQL_QUERY
}).subscribe(result => {
  // result.data 会被自动推断为MyQueryData类型
  console.log(result.data);
});

内容的提问来源于stack exchange，提问作者lampshade