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

Question

I am trying to display a bunch of images in my GatsbyJS site from ACF image fields. When using Gatsby Image on my site it returns null. I might be missing something obvious.

I've tried changing my graphql query in all sort of ways like use remoteFile instead of localFile, pass in srcSetWebp etc. but nothing seems to work for me.

Any help would be much appreciated.

My graphql query:

 {
  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
                }
              }
            }
          }
        }
      }
    }
  }
}

I am then trying to display the image using Gatsby-image Img-tag on my site. Gatsby-image is version 2.11.0:

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

When I do console.log(data) it simply just returns null. Screenshot: https://p221.p4.n0.cdn.getcloudapp.com/items/kpuK4ej6/19a9fe22-f210-48c8-a27b-3095fed974fe.png?source=client&v=3259d89b2c9f4fccd8edf69c38f7013e

Screenshot of graphiql IDE that returns data: https://p221.p4.n0.cdn.getcloudapp.com/items/QwuE4O7Q/4c664ef7-6fbe-4e4b-b533-79102a19ee53.png?v=bd25208826d6b8afa6a575075717d713

Ferran Buireu Ferran Buireu · Accepted Answer · 2021-04-22T05:36:16

The second screehnshot shows a v3 structure, with gatsbtImageData so I would strongly suggest using GatsbyImage instead of Img (v2), you have a mismatch of versions there because the query looks good and returns the needed data. Basically, you are querying a v3 image and trying to print it as v2, in addition wrongly (as I will point).

Check the gatsby-plugin-image guide for the installation and configuration process.

Among this major change, your Img is not printing the needed data, because it's not able to do it, both objects doesn't contain the same information. A v2 Img should look like:

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

Note the fixed props is printing fixed images. Now, you don't have that data so mixing both approaches will never work.

Your component should look like:

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

Since you are receiving null values (according to the screenshots), you will need to add the data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1 condition to avoid printing null values and hence a coce-breaking, or adding the optional chaining proposal (if installed), like:

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

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

1 Answers