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

Question

我试图在我的 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

Answer 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} alt="some alt text" />
  }

由于您正在接收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} alt="some alt text" />