Wordpress 盖茨比背景图像和；高级自定义字段的WPGraphQL

我正在尝试使用插件在盖茨比中设置背景

我的查询返回的sourceUrl和alt文本很好。然而，当运行gatsby develop时，它给了我一个错误“TypeError:无法读取未定义的属性'hero'。做一些研究，我想我可能必须使用ChildImageSharp来指定流体。然而，我不确定这是否适用于ACF领域

import React from "react"
import BackgroundImage from "gatsby-background-image"
import { Link, graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = (props) => (
  <Layout>
    <SEO title="Home" />
    <BackgroundImage
      className="masthead"
      fadeIn
      fluid={props.data.wordpress.pages.nodes.undersideACFgraphql.hero.sourceUrl}
    >
      <div className="black-overlay">
        <div className="content-box">
          <h1>This is where my h1 tag goes</h1>
          <h2>This is my sub head</h2>
        </div>
      </div>
    </BackgroundImage>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

export const pageQuery = graphql`
query MyQuery {
  wordpress {
    pages {
      nodes {
        undersideACFgraphql {
          hero {
            sourceUrl
            altText
          }
        }
      }
    }
  }
}
`;

从“React”导入React
从“盖茨比背景图像”导入背景图像
从“盖茨比”导入{Link，graphql}
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
常量索引扩展=（道具）=>(
这就是我的h1标签的位置
这是我的副手
转到第2页
)
导出默认索引扩展
export const pageQuery=graphql`
查询我的查询{
wordpress{
页数{
节点{
下边{
英雄{
源URL
altText
}
}
}
}
}
}
`;

您需要在localhost:8000/\u图形ql中检查它您需要在localhost:8000/\u图形ql中检查它