GatsbyJS：从 WPGraphQL 查询 Gatsby-image 以获取高级自定义字段

Posted 2023-03-08

【中文标题】GatsbyJS：从 WPGraphQL 查询 Gatsby-image 以获取高级自定义字段

【英文标题】：GatsbyJS: Query Gatsby-image from WPGraphQL for Advanced Custom Fields

【发布时间】：2021-07-16 07:36:20

【问题描述】：

我试图在我的 GatsbyJS 站点中从 ACF 图像字段中显示一堆图像。在我的网站上使用 Gatsby Image 时，它​​返回 null。我可能遗漏了一些明显的东西。

我已经尝试以各种方式更改我的 graphql 查询，例如使用 remoteFile 而不是 localFile、传入 srcSetWebp 等，但似乎没有什么对我有用。

任何帮助将不胜感激。

我的 graphql 查询：

 
  allWpPage 
    nodes 
      ACFgraphql 
        logoGrid 
          img9 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img8 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img7 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img6 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img5 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img4 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img3 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img2 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img12 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  srcSetWebp
                
              
            
          
          img11 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img10 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
          img1 
            localFile 
              childImageSharp 
                fixed(width: 104, height: 104) 
                  ...GatsbyImageSharpFixed_withWebp
                
              
            
          
        
      
    
  

然后我尝试在我的网站上使用 Gatsby-image Img-tag 显示图像。 Gatsby-image 是 2.11.0 版本：

<Img fixed=data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1 />

当我执行 console.log(data) 时，它只是返回 null。截图：https://p221.p4.n0.cdn.getcloudapp.com/items/kpuK4ej6/19a9fe22-f210-48c8-a27b-3095fed974fe.png?source=client&v=3259d89b2c9f4fccd8edf69c38f7013e

返回数据的graphiql IDE截图：https://p221.p4.n0.cdn.getcloudapp.com/items/QwuE4O7Q/4c664ef7-6fbe-4e4b-b533-79102a19ee53.png?v=bd25208826d6b8afa6a575075717d713

【参考方案1】：

second screehnshot 显示v3 结构，带有gatsbtImageData，所以我强烈建议使用GatsbyImage 而不是Img (v2)，因为查询看起来不错，所以您的版本不匹配并返回所需的数据。基本上，您正在查询v3 图像并尝试将其打印为v2，此外错误（正如我将指出的那样）。

查看gatsby-plugin-image 指南了解安装和配置过程。

在这一重大变化中，您的Img 没有打印所需的数据，因为它无法做到这一点，两个对象不包含相同的信息。 v2 Img 应该是这样的：

<Img fixed=data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1.fixed />

注意fixed props 正在打印fixed 图像。现在，您没有这些数据，因此混合这两种方法将永远行不通。

您的组件应如下所示：

  data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1 && 
    <GatsbyImage image=data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1.localfile.childImageSharp.gatsbyImageData  />
  

由于您正在接收null 值（根据屏幕截图），您需要添加data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1 条件以避免打印null 值并因此破坏coce，或者添加optional chaining proposal（如果已安装），例如：

 <GatsbyImage image=data?.allWpPage?.nodes[0]?.ACFgraphql?.logoGrid?.img1?.localfile?.childImageSharp?.gatsbyImageData  />

【讨论】：

谢谢费兰！那确实解决了我的问题。盖茨比图像的版本都搞砸了:)