Angular 5+GraphQL+Apollo中TS2339错误：'data'属性不存在问题咨询

这个错误的核心是你的TypeScript类型定义和GraphQL接口实际返回的数据结构不匹配，导致TypeScript编译器无法识别result.data.events.data这个属性。

具体问题拆解： #

• 你定义的Query类型里，events字段被声明为Event[]：

  export type Query = { events: Event[], }
  

• 但你的GraphQL查询实际返回的events是一个包含count和data的对象，而非直接的数组：

  {
    events(size: 200, filter: {eventType: Exhibition}) {
      count
      data {
        name
        url
      }
    }
  }
  

TypeScript会严格按照你定义的类型去校验，所以它认为result.data.events是Event[]类型，自然找不到data属性，于是抛出了Property 'data' does not exist on type 'Event[]'的错误。

修正步骤： #

1. 调整TypeScript类型定义，匹配GraphQL返回结构

先新增一个对应GraphQL返回的events结构的类型，再更新Query类型：

export type Event = { url: string, name : string };
// 新增类型，对应GraphQL返回的events对象结构
export type EventsResponse = {
  count: number;
  data: Event[];
};
export type Query = { events: EventsResponse };

2. 验证组件逻辑（无需修改代码，类型自动匹配）

现在result.data.events的类型会被TypeScript识别为EventsResponse，可以正常访问data属性了，你的组件代码逻辑本身是正确的，修改类型定义后红色下划线和编译错误都会消失：

export class ListComponent implements OnInit {
  events: Observable<Event[]>;
  constructor(private apollo: Apollo) { }
  ngOnInit() {
    this.events = this.apollo.watchQuery<Query>({
      query: gql`
      {
        events(size: 200, filter: {eventType: Exhibition}) {
          count
          data {
            name
            url
          }
        }
      }
      `
    })
    .valueChanges
    .pipe(
      map(result => result.data.events.data) // 现在TypeScript能正确识别该属性
    );
  }
}

这样修改后，类型检查和代码逻辑就能完美匹配，编译错误也会彻底解决。

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