<Синтаксис запроса не выполнен

Question

Хорошо. Нужны свежие глаза, чтобы определить мою ошибку:

Попытка получить содержимое для JS Carousel из базы данных mongo с помощью GraphQL (созданной strapi).

Работа в компоненте с соответствующим импортом:

import { Query } from 'react-apollo'
import { gql } from 'graphql-tag'
import React, { Component } from 'react'
import { Carousel, CarouselItem, CarouselControl, CarouselIndicators, CarouselCaption } from 'reactstrap'

в моем классе

...snippet...
render() {
  const GET_CAROUSELS = gql`
     query carousels {
        carousels {
          _id
          caption_header
          caption_text
          alt_text
          slide_file { url }
        }
     }`
return (
   <Query query={GET_CAROUSELS} errorPolicy="all">
      {({ loading, error, data }) => {
        let cars = data.carousels
        if (error) console.log(error)
        if (!cars || cars.length == 0){
          return <div>No Carousels found</div>
        } else {
          return (
             <React.Fragment>
              <Carousel activeIndex={this.activeIndex}
                        next={this.next}
                        previous={this.previous} >
                {cars.map(carousel => (
                   <CarouselItem key={carousel._id}>
                      <img scr={carousel.slide_file.url} />
                  </CarouselItem>
                ))}
             </Carousel>

Я пробовал много перестановок, и этот текущий код ошибки с cannot read property of 'map' undefined

Моя игровая площадка QLGraph показывает, что этот запрос работает нормально:

 query {carousels {
    _id
   caption_header
   caption_text
   alt_text
   slide_file { url }
  }
 }

Я пытался изменить <Query query, но безрезультатно. Пробовал с и без let cars = data.carousels иногда просто let cars=carousels и т. Д. Помогите, у меня болят глаза.