[gatsby-plugin-image] typescript type error for image props

[tamalnh]

Description

I have migrated from gatbsy-image to gatsby-plugin-image on one of my existing blog site. But every time I map my blog post data and put it in the image as a dynamic image, it gives a type error in image props. I understand that before running the loop, I am not getting anything as image props, so it's giving a type error. I can put a backup image here so the type error goes away but I don't think it's an efficient way.

My code

import React from "react"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const TestImage = ({data}) => { 
    const posts = data.allPosts.edges
    return(
        <div> 
            {posts.map((post, i) => {
                const image = getImage(post.node.frontmatter.thumbnail.childImageSharp.gatsbyImageData)
                return <GatsbyImage key={i} image={image} alt="blog post image" />
            })}
        </div>
    )
}
export default TestImage;

Type error

Type 'IGatsbyImageData | undefined' is not assignable to type 'IGatsbyImageData'.
 Type 'undefined' is not assignable to type 'IGatsbyImageData'.ts(2322)
gatsby-image.browser.d.ts(11, 5): The expected type comes from property 'image' which is declared here on type 'IntrinsicAttributes & GatsbyImageProps & { children?: ReactNode; }

[cameronbraid]

I think you can do either

                const image = post.node.frontmatter.thumbnail.childImageSharp.gatsbyImageData
                return <GatsbyImage key={i} image={image} alt="blog post image" />

or

                const image = getImage(post.node.frontmatter.thumbnail)
                return <GatsbyImage key={i} image={image} alt="blog post image" />