Данные из Gatsby GraphQL всегда возвращают undefined?

Question

Гэтсби, нуб, так что терпите меня. У меня есть компонент, который принимает реквизиты из индекса. js, где он должен получать данные из массива объектов, но всегда будет получать ошибку TypeError: Cannot read property 'map' of undefined, где он ссылается на индекс компонента Hero. js. js требует.

Мое предположение состоит в том, что данные, запрашиваемые в индексе. js либо не указаны c достаточно, либо компонент визуализируется до получения данных. Вот индекс. js файл:

import { graphql } from 'gatsby';

import { Layout, SEO, Hero } from 'components';

const IndexPage = ({ data }) => {
  const dataFetch = data.contentfulTemplateIndex.heroes;
  let tester = () => {
    for (let count = 0; count < dataFetch.length; count++) {
      return <Hero {...props} />;
    }
  };
  console.log(dataFetch);
  let props = {
    impactText: dataFetch.impactText,
    labels: dataFetch.labels,
    primaryLabel: dataFetch.primaryLabel,
    location: dataFetch.location
    // supportingText: dataFetch.supportingText.json
  };

  return (
    <Layout>
      {dataFetch && tester()}
    </Layout>
  );
};

export const query = graphql`
  query {
    contentfulTemplateIndex {
      heroes {
        image {
          fluid {
            src
          }
        }
        impactText
        labels
        location
        primaryLabel
        supportingText {
          json
        }
      }
    }
  }
`;

export default IndexPage;

Вот компонент Hero. js, который вызывает index. js:

import { Link } from 'gatsby';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import cx from 'classnames';

import styles from './hero.module.scss';

const Hero = (props) => {
  return (
    <div>
      <ul>
        <Link className={styles.pills}>{props.primaryLabel}</Link>
        {props.labels.map((label) => {
          return <Link className={styles.pills}>{label}</Link>;
        })}
      </ul>
      <div className={styles.grid}>
        <h1>{props.impactText}</h1>
      </div>
    </div>
  );

};

export default Hero;

Answer 1

Посторонний человек не может отладить ваш код без минимально воспроизводимого примера .

Лучший способ отладки GraphQL - использовать интерфейс Graph i QL вашего браузера.

1. Выполнить gatsby develop. Если это не удается из-за TypeError, удалите строки кода, которые вызывают ошибку типа (но не код вашего запроса GraphQL!). Вам необходимо запустить свой сервер разработки.

2. Откройте браузер, используйте URL-адрес: http://localhost:8000/___graphql

3. Скопируйте запрос graphQL из вашего код и вставьте его в окно запроса GraphiQL.

4. Можете ли вы получить доступ к своим данным там? Если нет, вы допустили ошибку при написании запроса или данные находятся не там, где они должны быть.

Таким образом вы можете убедиться, что данные существуют.

Это также помогает console.log(props), чтобы вы могли изучить объект данных:

const Hero = (props) => {
  console.log(props);
  return (