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

Question

我正在尝试在我的 GatsbyJS 站点中显示来自 ACF 图像字段的一堆图像。在我的网站上使用 Gatsby Image 时，它 returns 为空。我可能遗漏了一些明显的东西。

我试过以各种方式更改我的 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) 时，它只是 returns null。截图：https://p221.p4.n0.cdn.getcloudapp.com/items/kpuK4ej6/19a9fe22-f210-48c8-a27b-3095fed974fe.png?source=client&v=3259d89b2c9f4fccd8edf69c38f7013e

graphiql IDE 的屏幕截图 returns 数据：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 )，您那里的版本不匹配，因为查询看起来不错并且 returns 需要的数据。基本上，您正在查询 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 值，从而避免破坏，或添加 optional chaining proposal（如果已安装），如：

 <GatsbyImage image={data?.allWpPage?.nodes[0]?.ACFgraphql?.logoGrid?.img1?.localfile?.childImageSharp?.gatsbyImageData} alt="some alt text" />

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

GatsbyJS: Query Gatsby-image from WPGraphQL for Advanced Custom Fields

reactjs

graphql

gatsby

gatsby-image