得到错误TS2339：角度5和graphQL和apollo中的属性“数据”

Question

我有这种类型

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：属性'数据'不存在于'Event []'类型上。管道代码中的数据带有红色下划线。我是角度新的，所以我尝试了几件事但没有成功，我需要知道为什么会出现这个错误。谢谢

Answer 1

正如您所说，在服务器上定义的查询事件类型是这样的：

export type Query = {
  events: Event[]
}

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

现在打电话给您的角度代码，我注意到两个问题：

1. 期待count和data字段响应events查询，但由于这些字段不存在于服务器定义的events类型中，您将收到错误。
2. 此外，您已将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)
    );
  }
}

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

希望它可以帮助别人