Gatsby 源 WordPress 在构建中出现 ACF 空字段错误，但在开发中没有答案

【问题标题】：Gatsby source WordPress with ACF null field errors in build but not developmentGatsby 源 WordPress 在构建中出现 ACF 空字段错误，但在开发中没有
【发布时间】：2021-03-07 02:15:49
【问题描述】：

以下示例是一个对象，该对象包含来自使用 Gatsby 和 WPGraphQL 的 ACF 中继器字段查询的数据

在 gatsby develop 中有效，但在 gatsby build 中无效：

const IndexPage = ({data}) => {

//this  ACF text field works in both build and development:
console.log(data.wpPage.homepagefields.contact.line1)      

//this fails in build only
console.log(data.wpPage.homepagefields.brands[0].logo.localFile.childImageSharp.fluid.src)
console.log(data.wpPage.homepagefields.services[0])

useEffect(()=>{

}, [])`

我尝试移动 console.log 错误

在 gatsby develop 中都有效，但在 gatsby build 中无效：

const IndexPage = ({data}) => {

//this  ACF text field works in both build and development:
console.log(data.wpPage.homepagefields.contact.line1)    

useEffect(()=>{

    console.log(data.wpPage.homepagefields.brands[0].logo.localFile.childImageSharp.fluid.src)
    console.log(data.wpPage.homepagefields.services[0])
    
}, [])

尝试在 return() 中访问这些属性时出现相同的构建错误（brands 解析为 null）：

  return (
    <main className={classes.homepage}>
        <div className={classes.homepage__container}>
           <h1 style={{color:"white"}}>{data.wpPage.homepagefields.contact.line1}</h1>
           <img src={data.wpPage.homepagefields.brands[0].logo.localFile.childImageSharp.fluid.src}></img>
        </div>
    </main>
  )

盖茨比构建错误：

Screen grab of build error

也许我在生命周期中遗漏了一些东西，但对我来说，在组件安装之前中继器数据不可用是没有意义的。

有没有人在这里经历过相同/相似的经历？

【问题讨论】：

brands 总是为空？甚至在网站中前后移动？
就是这样，我没有意识到我还有一个多余的页面：/感谢您在上面记录我的记忆

标签： wordpress build gatsby advanced-custom-fields

【解决方案1】：

找到罪魁祸首，在重新安装/更新所有 gatsby 插件后，我发现我只有另一个页面，但没有与之关联的任何自定义字段。

我从未在开发模式下加载该页面，因此我没有收到错误消息。

提醒自己，制作一个特定于主页的模板。

【讨论】：