来自 Gatsby GraphQL 的数据总是返回未定义？

Question

Gatsby noob here so please bear with me. I have a component that accepts props from the index.js where it is supposed to receive data from an array of objects but will always receive the error TypeError: Cannot read property 'map' of undefined where it's referring to the Hero.js component index.js is calling for.

My assumption is that the data being queried in index.js is either not specific enough or that it is rendering the component before data is received. Here is the index.js file:

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;

Here is the Hero.js component which index.js is calling:

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

It's impossible for an outsider to debug your code without a minimum reproducable example .

The best way to debug GraphQL is to use the Graph i QL interface of your browser.

1. Run gatsby develop . If it fails because of the TypeError remove the lines of code that cause the type error (but not the code of your GraphQL query.). You need to get your development server runnning.

2. Open your browser, use the URL: http://localhost:8000/___graphql

3. Copy your graphQL query from your code and paste it into the GraphiQL query window.

4. Can you access your data there? If not you made a mistake writing your query or the data is not where it's supposed to be.

This way you can make sure the data exists.

It also helps to console.log(props) so you can examine the data object:

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