Получение ошибки TS2339: свойство 'data' в angular 5 и graphQL и apollo - PullRequest
Новая
       5

Получение ошибки TS2339: свойство 'data' в angular 5 и graphQL и apollo

0 голосов
/ 14 мая 2018

У меня есть эти типы 

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: свойство 'data' не существует для типа 'Event []'.и данные в коде канала с красным подчеркиванием.я новичок в угловых, поэтому я попробовал пару вещей и не удалось, мне нужно знать, почему получить эту ошибку.спасибо

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

решение: проблема заключалась в том, что я не создал свой тип в соответствии с ответом, который я получил от 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)
    );
  }
}

надеюсь, что это может кому-то помочь

0 голосов
/ 14 мая 2018

Как вы сказали, тип события запроса, определенный на сервере, выглядит примерно так: 

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