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

Question

我正在从 Contentful api 中提取数据到 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;

Answer 1

看来我可以通过在 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
            }
          }
        }
      }
    }
  }
`;

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

Show Contentful product using GatsbyJS

reactjs

contentful

gatsby