无法在 Gatsby、Contentful 和 Graphql 中读取属性个未定义图像？

Question

我正在尝试在我的 Gatsby 项目中使用 Graphql 显示存储在 Contentful 上的图像。

我正在使用 gatsby-plugin-image，因为 gatsby-image 似乎已贬值。到目前为止，我已经按照似乎呈现结果的在线文档进行了操作，但是当我在本地计算机上尝试它时，我收到了一条错误消息。

我的代码如下：

import * as React from "react"
import { Link, graphql } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
// import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Layout from "../components/layout"
import Seo from "../components/seo"
import Navbar from "../components/Navbar"
import Img from 'gatsby-plugin-image'

function App( {data} ) {
  return (
    <>

    <Layout>
     <Img fluid={data.allContentfulHeroImage.edges.node.heroImage.fluid}></Img>
     </Layout>

    </>
  )
}

export default App;

export const query = graphql 
`query MyQuery {
  allContentfulHeroImage {
    edges {
      node {
        heroImage {
          fluid (maxWidth: 2000) {
                        ...GatsbyContentfulFluid
          }
        }
      }
    }
  }
}`

报错信息如下：

Cannot read property 'heroImage' of undefined

代码编译生成服务器的文件，但抛出运行时错误。

调查 Graphql 查询时，它似乎返回一切正常。

{
  "data": {
    "allContentfulHeroImage": {
      "edges": [
        {
          "node": {
            "heroImage": {
              "fluid": {
                "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAMAAABI111xAAACKFBMVEX+/Pzu6ue4qp/Hw8HLzc6srK6SjoXAvbrTzcbNeobeMFTLuaj27+r69fHp39bi1cnv49b89/D9/f3+/P3u6ui3qp7HxMNsgY2SorCAgX2/vLrOx8DZU2X1EEGmiHv28e7269/z7Ob18e758ur78OL+/v62qJzEwcCLj5Ggq7OIjZK+u7uguclxfYuQgoN6kJ7v7On27ODz7+3l2db27+f88uT9+/qzppve2dbQy8nQzMnRzcm9xcssgLg/g61IhKc6h77h5ej16+Dw7OjPwb7m3tT78uWwo5jz7eny7Ofy7Oi2y9kserEZZ5oYbadTibbR2+T16t7u5+PfysX06Nz78+ft6eeuoJa0yNZCga6IpKwwfrU2hLzZ3eD17OLp3M/s4tj16Nn89OmrnpTz7efK1Nkbbqglda1TjrhBfafy7uv8+fb69/T17+nw4tP8+fT9/PymmZHs5eDc1M/Pw8C/sa2Yr78KYZ0OZ6UTbas4d6Lz7+v8+PX7+ff7+vj8/Prm5OXt6eVhUk2tmZCwnpOgi32WgnR9gYQNX5oKXJkWb6tVfpn79/T59vP6+Pb8+/ra2Np5dnesqqyEd23j39WppJljY2R2aV1ma2wOXJUWY5sYbamAh4vx7en69vP59fH69/XLyMjAvsDb2tu9trhgXWKxsLJ/cmjV1cyEhH11bGiBcWaMkZUHUIgVYpkWaKGjm5Xm3Njw6eTg2tT49PHX0tHf3d2cmZsK8zYRAAAACXBIWXMAACToAAAk6AGCYwUcAAAAB3RJTUUH5QgXDwE4TabKlAAAAGtJREFUCB1lwcERAUEQhtH/2+qjoVdvAspFBBKQhxDkIicnInBwdOyiJDBOpmrNe4iOCDqJpjVzD9n+tmUu0q44UAealMWBj6oKTaSlFuUpFRodLbRkxc/bIX04Xcbm5ZuxupwzPZv4c9/xBY2+FUzXeF9XAAAAAElFTkSuQmCC",
                "aspectRatio": 1.7702233250620347,
                "src": "//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=800&q=50",
                "srcSet": "//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=200&h=113&q=50 200w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=400&h=226&q=50 400w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=800&h=452&q=50 800w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=1200&h=678&q=50 1200w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=1600&h=904&q=50 1600w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=2400&h=1356&q=50 2400w,\n//images.ctfassets.net/m7ipc0qjqa17/5H1yapaRznP5PlOxymzApj/d60687e3c7acc68a866d2718a4db125c/Screenshot_2021-08-23_145047.png?w=3567&h=2015&q=50 3567w",
                "sizes": "(max-width: 800px) 100vw, 800px"
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

我非常不确定这里的问题是什么，我在别处看过并且其他示例看起来不错，这可能与 gatsby-plugin-image 有关吗？

任何帮助都会很好，因为这似乎是一个小众问题。

谢谢

Answer 1

edges 是一个数组，数组没有 node 属性，所以 edges.node 的计算结果为 undefined。然后您尝试在 undefined 上访问 heroImage，这会引发错误。

改为考虑使用 edges.map，例如：

edges.map(({ node }, index) => <Img key={index} {...node.heroImage} />)

对于它的价值，您可以更改您的查询以稍微简化这首歌和舞蹈：

export const query = graphql`
  {
    heroImages: allContentfulHeroImage {
      nodes {
        heroImage {
          fluid (maxWidth: 2000) {
            ...GatsbyContentfulFluid
          }
        }
      }
    }
  }
`

然后您将能够映射到 data.heroImages.nodes，而不是从每个项目中解构 node，您可以按原样使用它或解构您需要的属性。例如：

data.heroImages.nodes.map(({ heroImage }, index) =>
  <Img key={index} {...heroImage} />
)

无法在 Gatsby、Contentful 和 Graphql 中读取属性个未定义图像？

Cannot read property of undefined image within Gatsby, Contentful and Graphql?

reactjs

contentful

graphql

gatsby

gatsby-image

无法在 Gatsby、Contentful 和 Graphql 中读取 属性 个未定义图像？

Cannot read property of undefined image within Gatsby, Contentful and Graphql?

reactjs

contentful

graphql

gatsby

gatsby-image

无法在 Gatsby、Contentful 和 Graphql 中读取属性个未定义图像？