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

So it looks like I was able to solve this by passing props and querying the data on the index.js page.

Solution:

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显示Contentful产品

1 个答案: