Gatsby JS фоновое изображение с использованием ACF и WordPress - PullRequest
Новая
       30

Gatsby JS фоновое изображение с использованием ACF и WordPress

0 голосов
/ 31 марта 2020

Я пытаюсь отобразить фоновое изображение с помощью плагина gatsby-background-image . Мой код возвращает "TypeError: Невозможно прочитать свойство 'acf' undefined".

Я пытался изменить свой запрос во всех видах вариаций, но не могу понять, как получить фоновое изображение в отобразить. Я думаю, что проблема может быть связана с тем, что каждая страница содержит это конкретное поле ACF. Некоторые возвращают нуль (те, которые я еще не использовал), а остальные возвращают изображение. Может быть, мне нужно добавить некоторые условные логики c, чтобы обрабатывать, когда это конкретное поле пусто? 

import React from 'react'
import Layout from '../components/layout'
import { graphql } from "gatsby"
import BackgroundImage from 'gatsby-background-image';

const IndexPage = (props) => (
    <Layout >
        <BackgroundImage
            className="masthead"
            fluid={props.data.allWordpressPage.edges.node.acf.banner.localFile.childImageSharp.fluid}
            fadeIn
        >
            <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>
    </Layout >
)

export default IndexPage

export const query = graphql`
  query {
    allWordpressPage {
      edges {
        node {
          acf {
            banner {
              localFile {
                childImageSharp {
                  fluid(maxWidth: 1800) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            } 
          }
        }
      }
    }
  }
`;

Вот что возвращает мой запрос в GraphQL) Я отредактировал длинный URL из tracedSVG и Base64 out): 

{
  "data": {
    "allWordpressPage": {
      "edges": [
        {
          "node": {
            "acf": null
          }
        },
        {
          "node": {
            "acf": {
              "banner": {
                "localFile": {
                  "childImageSharp": {
                    "fluid": {
                      "base64": "data:image/jpeg;base64",
                      "tracedSVG": "data:image/svg+xml",
                      "srcWebp": "/static/beb79c2e06df840f0e0578a05fb731fa/685a2/tyler-nix-LH6GBACnq5A-unsplash-scaled.webp",
                      "srcSetWebp": "/static/beb79c2e06df840f0e0578a05fb731fa/b8a88/tyler-nix-LH6GBACnq5A-unsplash-scaled.webp 450w,\n/static/beb79c2e06df840f0e0578a05fb731fa/210c1/tyler-nix-LH6GBACnq5A-unsplash-scaled.webp 900w,\n/static/beb79c2e06df840f0e0578a05fb731fa/685a2/tyler-nix-LH6GBACnq5A-unsplash-scaled.webp 1800w,\n/static/beb79c2e06df840f0e0578a05fb731fa/ab8d3/tyler-nix-LH6GBACnq5A-unsplash-scaled.webp 2560w",
                      "originalImg": "/static/beb79c2e06df840f0e0578a05fb731fa/4a461/tyler-nix-LH6GBACnq5A-unsplash-scaled.jpg",
                      "originalName": "tyler-nix-LH6GBACnq5A-unsplash-scaled.jpg",
                      "presentationWidth": 1800,
                      "presentationHeight": 1200
                    }
                  }
                }
              }
            }
          }
        },
        {
          "node": {
            "acf": {
              "banner": null
            }
          }
        }
      ]
    }
  }
}
...