wordpress - 用于高级自定义字段的 Gatsby 背景图像和 WPGraphQL

Question

我正在尝试使用gatsby-background-image插件在 Gatsby 中设置背景。

我的查询返回 sourceUrl 和 alt-text 就好了。但是，当运行 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
          }
        }
      }
    }
  }
}
`;

标签： wordpressgraphqladvanced-custom-fieldsgatsby