Reactjs 使用GatsbyJS显示内容丰富的产品

我正在将来自ContentfulAPI的数据拉入gatsby，一切似乎都进展顺利。然而，当我实现将有内容的数据拉入index.js文件的组件时，我不断得到一个未定义的错误

WebpackError: Cannot read property 'allContentfulProduct' of undefined

Product.js：

import React from "react"

const Product = ({data}) => {
  const assets = data.allContentfulProduct.edges[0].node
  const { productName } = assets;

 return (
    <div>
      {productName}
    </div>
  )
};

export default Product;



export const pageQuery = graphql`
  query ImageAPIExamples {
    allContentfulProduct {
      edges {
        node {
          id
          productName
        }
      }
    }
  }
`

Index.JS

import React from 'react';
import Products from '../components/products/image';

const IndexPage = props =>
  (<main>
    Hello
  </main>);

export default IndexPage;

---

看来我可以通过传递道具和查询index.js页面上的数据来解决这个问题

解决方案：

Index.js：

import React from 'react';
import Products from '../components/products/image';


const IndexPage = props =>
  (<main>
    <Products data={props.data.allContentfulProduct.edges[0].node} />
  </main>);

export default IndexPage;

export const pageQuery = graphql`
  query IndexQuery {
    allContentfulProduct {
      edges {
        node {
          id
          productName
          image {
            file{
              url
            }
          }
        }
      }
    }
  }
`;

---

您只能从提供给createPage的组件中从GraphQL获取数据并导出pageQuery魔术变量。如果Products.js是从index.js导入的，则无法从GraphQL获取。这是为了让盖茨比静态编译您的数据。