出现错误 TS2339：角度 5 和 graphQL 和 apollo 中的属性“数据”答案

【问题标题】：getting error TS2339: Property 'data' in angular 5 and graphQL and apollo出现错误 TS2339：角度 5 和 graphQL 和 apollo 中的属性“数据”
【发布时间】：2018-05-15 04:23:35
【问题描述】：

我有这种类型

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

我有从 graphQL 获取的组件

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)
    );
  }
}

使用此代码，我可以获取数据并在模板中显示他，但是当我编译时我仍然得到 src/app/components/list/list.component.ts(31,40) 中的错误：错误 TS2339：“事件 []”类型上不存在属性“数据”。管道代码中的数据带有红色下划线。我是角度新手，所以我尝试了几件事但没有成功，我需要知道为什么会出现这个错误。谢谢

【问题讨论】：

标签： angular5 graphql apollo

【解决方案1】：

如您所说，在服务器上定义的查询事件类型类似于：

export type Query = {
  events: Event[]
}

这意味着事件查询将返回具有url 和name 字段的事件对象数组。

现在开始使用您的 Angular 代码进行调用，我注意到两个问题：

它需要字段 count 和 data 以响应 events 查询，但由于服务器上定义的 events 类型中不存在这些字段，因此您会收到错误消息。
此外，您已将 size 和 filter 参数传递给查询，但它们尚未在服务器上相应的 graphQL 类型中定义，并且由于进行的查询不尊重架构，因此会引发错误。

以下代码应该可以正常工作，

export class ListComponent implements OnInit {
  events: Observable<Event[]>;
  constructor(private apollo: Apollo) { }
  ngOnInit() {
    this.events = this.apollo.watchQuery<Query>({
      query: gql`
      {
        events {
          name
          url
        }
      }
      `
    })
    .valueChanges
    .pipe(
      map(result => result.data.events)
    );
  }
}

【讨论】：

【解决方案2】：

解决方案：问题是我没有根据我从 graphQL 得到的答案来构建我的类型新类型：

export type Query = {
  events : Events,
}

export type Events = {
  count: number,
  data : Event[],
}

export type Event = {
  url: string,
  name : string,
}

和查询：

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)
    );
  }
}

希望它可以帮助某人

【讨论】：