Фоновые изображения Gatsby и WPGraphQL для расширенных пользовательских полей - PullRequest
Новая
       34

Фоновые изображения Gatsby и WPGraphQL для расширенных пользовательских полей

1 голос
/ 23 апреля 2020

Я пытаюсь установить фон в Гэтсби, используя плагин gatsby-background-image .

Мой запрос возвращает sourceUrl и alt-text просто отлично. Тем не менее, при запуске gatsby development выдает ошибку «TypeError: Невозможно прочитать свойство 'hero' of undefined". Делая некоторые исследования, я думаю, что мне, возможно, придется использовать 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
          }
        }
      }
    }
  }
}
`;
...