Contentful/Gatsby Error - Interface field HomepageImage.gatsbyImageData expects type JSON but ContentfulAsset.gatsbyImageData is type GatsbyImageData

Question

I'm working on a site using the Gatsby Starter Contentful Homepage that was build about a year ago -

https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-contentful-homepage

While attempting to run locally the error below is preventing me from building app -

ERROR DURING "npm run develop":

Interface field HomepageImage.gatsbyImageData expects type JSON but ContentfulAsset.gatsbyImageData is type GatsbyImageData

gatsby.node

    interface HomepageImage implements Node {
      id: ID!
      alt: String
      gatsbyImageData: JSON @imagePassthroughArgs
      url: String
    }

example of page js return -

{props.image && (
    <GatsbyImage
        alt={props.image.alt}
        image={getImage(props.image.gatsbyImageData)}
        />
    )}

example of page js query

export const query = graphql`
  query PageContent($id: String!) {
    page(id: { eq: $id }) {
      id
      title
      slug
      description
      image {
        gatsbyImageData
        id
        url
      }
      html
    }
  }
`

So far I have -

• delete / install node modules
• deleted / replaced all refs to gatsbyImageData
• checked the data model in contentful
• searched for similar issues

Not sure where to start troubleshooting this with the information available . . .

Answer 1

Where you have:

    interface HomepageImage implements Node {
      id: ID!
      alt: String
      gatsbyImageData: JSON @imagePassthroughArgs
      url: String
    }

Change the gatsbyImageData line to:

gatsbyImageData: GatsbyImageData @imagePassthroughArgs