GatsbyImage is not working when querying images from the Gallery ACF from WordPress

user_13999612 0
Viewed 17

I am using the gallery ACF in WordPress, my console.log proves my query and component to be accurately sourcing the data, however, the gallery images do not show up on my page both locally or in a production build. Can someone please help me figure this out?

My query:

query GalleryQuery {
    wpPage(databaseId: {eq: 41}) {
      ACF_GalleryPage {
        gallery {
          id
          altText
          localFile {
            childImageSharp {
              gatsbyImageData
              fluid {
                base64
                tracedSVG
                srcWebp
                srcSetWebp
                originalImg
                originalName
                src
              }
              fixed {
                src
              }
            }
          }
        }
      }
    }
  }

My component:

export default function GalleryPortfolio() {
  const data = useGalleryQuery()
  return (
    <Section>
      <Container>
        {data.wpPage.ACF_GalleryPage.gallery.map(localFile => {
          console.log(localFile.localFile.childImageSharp.fluid.src);
          <GatsbyImage image={localFile.localFile.childImageSharp.fluid.src} alt="" />
          
       })}
      </Container>
    </Section>
  )
}
advanced-custom-fields gatsby wordpress
1 Answers

You are mixing gatsby-image (from Gatsby 1 and 2) and gatsby-plugin-image (from Gatsby 3 onwards). More specifically, you are running a gatsby-image query (that has fluid or fixed properties) and using a gatsby-plugin-image component (GatsbyImage) which only accepts an image property, not fixed or fluid.

That said, remove the gatsby-image references and check the migration guide to ensure that you are using the proper configuration. In the end, you need to have something like this in your gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

This configuration will create the proper nodes when fetching your ACF images, not fluid or fixed as it right now.

Because you have already a gatsbyImageData node, it seems that you have both plugins running and creating their own nodes so once you get rid of gatsby-image the query should simply look like:

query GalleryQuery {
    wpPage(databaseId: {eq: 41}) {
      ACF_GalleryPage {
        gallery {
          id
          altText
          localFile {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  }

Then you simply need to pass the gatsbyImageData as image:

export default function GalleryPortfolio() {
  const data = useGalleryQuery()
  return (
    <Section>
      <Container>
        {data.wpPage.ACF_GalleryPage.gallery.map(localFile => {
          console.log(localFile.localFile.childImageSharp.fluid.src);
          <GatsbyImage image={localFile.localFile.childImageSharp.gatsbyImageData} alt="" />
          
       })}
      </Container>
    </Section>
  )
}
user_55853710
Related