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

Answer 1

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

export type Query = {
  events: Event[]
}

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

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

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

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

希望它可以帮助某人

得到错误TS2339：财产＆＃39;数据＆＃39;在角度5和graphQL和阿波罗

2 个答案: