How to Query Images via GraphQL with the gatsby-plugin-image plugin

Question

Hi I'm using Prismic as a Headless CMS and want to Query out images within the gatsby-plugin-images plugin. Unfotunatly I got no error message or anything else, its just not working.

class Index extends Component {
  render() {
    const {
      data: { homepage },
    } = this.props
    const image = getImage(homepage.data.gesichter.localFile)
    return (
      <Layout>
        <IndexWrapper id={website.skipNavId} style={{ paddingTop: '2rem', paddingBottom: '2rem' }}>
          <Hero>
            <HeroInner>
              <H1>{homepage.data.title.text}</H1>
              <GatsbyImage image={image} alt={homepage.data.gesichter.alt} />
            </HeroInner>
          </Hero>
        </IndexWrapper>
      </Layout>
    )
  }
}

export default Index

Index.propTypes = {
  data: PropTypes.shape({
    homepage: PropTypes.shape({
      data: PropTypes.shape({
        title: PropTypes.shape({
          text: PropTypes.string.isRequired,
        }),
        content: PropTypes.shape({
          html: PropTypes.string.isRequired,
        }),
        gesichter: PropTypes.shape({
          alt: PropTypes.string.isRequired,
          localFile: PropTypes.shape({
            childImageSharp: PropTypes.shape({
              gatsbyImageData: PropTypes.element.isRequired,
            }),
          }),
        }),
      }),
    }),
  }).isRequired,
}

export const pageQuery = graphql`
  query IndexQuery {
    homepage: prismicHomepage {
      data {
        title {
          text
        }
        content {
          html
        }
        gesichter {
          alt
          localFile {
            childImageSharp {
              gatsbyImageData(
                width: 200
                placeholder: BLURRED
               
                layout: FULL_WIDTH
              )
            }
          }
        }
      }
    }
  }
`

I think there is something wrong with the prop types gatsbyImageData: PropTypes.element.isRequired, but I didn't got further.

Does anyone has an idea what to do?

Answer 1

It's possible that your localFile field is null. According to your PropTypes, the localFile field is not required which could be why you are not seeing a warning or error.

Can you confirm that gatsby-source-prismic is configured to download files locally?

You can do this by including this in your site's gatsby-config.js file:

// In your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-source-prismic',
    options: {
      // Along with your other options...

      // Set a function to determine if images are downloaded locally and made
      // available for gatsby-transformer-sharp for use with gatsby-image.
      // The document node, field key (i.e. API ID), and field value are
      // provided to the function, as seen below. This allows you to use
      // different logic for each field if necessary.
      // This defaults to always return false.
      shouldDownloadImage: ({ node, key, value }) => {
        // Return true to download the image or false to skip.
        return true
      },
    },
  },
]

For most cases, that option can look like this:

plugins: [
  {
    resolve: 'gatsby-source-prismic',
    options: {
      // Along with your other options...
      shouldDownloadImage: () => true,
    },
  },
]

After restarting your Gatsby development server with gatsby develop, you should see your images downloading and available at the localFile field.