Gatsby Wordpress ACF Поля изображения возвращаются 'null'

Question

У меня есть сайт GatsbyJS, использующий данные из Wordpress через gatsby-source-wordpress.Все работало нормально до вчерашнего дня, когда мои запросы начали давать сбои.Я использую расширенные настраиваемые поля и больше не могу запрашивать поля изображения, мой запрос выглядит так, когда я получаю все сообщения с типом сообщения «Проект» ...

allWordpressWpProject {
    edges {
        node {
            title
            slug
            path
            link
            acf {
                project_banner_title
                project_slider_image {
                    source_url
                    alt_text
                }
                project_navigation_image {
                    source_url
                    alt_text
                }
                project_banner_image {
                    source_url
                    alt_text
                }
            }
        }
    }
}

Но все поля изображения теперь возвращаютсяnull.Когда я запускаю запрос через Wordpress или вручную нажимаю на конечную точку wp-json, поля изображения возвращаются, как и ожидалось.

Есть идеи?

Answer 1

Убедитесь, что в поле acf выводится URL-адрес изображения, а не объекта. Если вы используете gatsby-image-sharp, вы можете поместить эти части в свой запрос.

allWordpressWpProject {
    edges {
        node {
            title
            slug
            path
            link
            acf {
                project_banner_title
                project_slider_image {
                    localFile {
                        childImageSharp {
                            fluid(maxWidth: 600) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
                project_navigation_image {
                    localFile {
                        childImageSharp {
                            fluid(maxWidth: 600) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
                project_banner_image {
                    localFile {
                        childImageSharp {
                            fluid(maxWidth: 600) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
            }
        }
    }
}

Тогда вы можете использовать gatsby-image так:

const sliderOne = data.allWordpressWpProject.edges.node.acf.project_slider_image.localFile.childImageSharp.fluid;

<Img fluid={sliderOne} alt={project_banner_title} />