如何显示来自 graphql 查询 Gatsbyjs 的数据？

Question

我需要一些帮助。我正在使用 Gatsbyjs 并且内容丰富。我已经使用 graphql 查询了数据。我可以看到该对象，但我似乎无法在 div 中显示它。我在这里错过了什么？错误一直说无法读取地图的未定义属性。还有另一种方法吗？内容包括文本、图像和 mp3。让我知道我在这里缺少什么。

这是代码

const IndexPage = ({data}) => {
  
  console.log(data);
  
  return (
    <div>
    {data.edges.map(edge => <p key={edge} >{edge}</p>)}
    </div>
      )
}

export const query = graphql `
query MyQuery {
  allContentfulPodcast {
    edges {
      node {
        title
        thumbnail {
          file {
            details {
              image {
                height
                width
              }
              size
            }
            fileName
            url
          }
        }
        video {
          file {
            fileName
            url
          }
        }
      }
    }
  }
}

控制台日志对象

{
    "allContentfulPodcast": {
        "edges": [
            {
                "node": {
                    "title": "Welcome to our show",
                    "thumbnail": {
                        "file": {
                            "details": {
                                "image": {
                                    "height": 5304,
                                    "width": 7952
                                },
                                "size": 4752704
                            },
                            "fileName": "business.jpg",
                            "url": "//images.ctfassets.net/hi3b2mc578jm/3wxzzKv4Rblsv1FAUR2SQ/d8f09ade7e9fc57afa2f425bb2da9ed5/business.jpg"
                        }
                    },
                    "video": {
                        "file": {
                            "fileName": "watch",
                            "url": "//assets.ctfassets.net/hi3b2mc578jm/4kK38bwyJRxPYoM3SADQrU/4b11d4079052f651685a407c7fc6ecb4/watch"
                        }
                    }
                }
            }
        ]
    }
}

Answer 1

您必须将一些值而不是整个对象传递给 <p> 标记。例如：

<div>
  {data.allContentfulPodcast.edges.map((edge, index) => <p key={index}>{edge.node.title}</p>)}
</div>

Answer 2

您缺少对象的另一个级别：“无法读取地图的未定义属性”您应该尝试：

  return (
    <div>
      {data.allContentfulPodcast.edges.map(edge => <p key={edge.node.title} >{edge}</p>)}
    </div>
    )

如何显示来自 graphql 查询 Gatsbyjs 的数据？

how to display data from graphql query Gatsbyjs?

reactjs

contentful

graphql

gatsby