`getImage` types requires `Node` properties in it

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hi, I’ve the following code where getImage is throwing this error:

Argument of type '{ childImageSharp: { gatsbyImageData: any; }; }' is not assignable to parameter of type 'ImageDataLike'.
  Type '{ childImageSharp: { gatsbyImageData: any; }; }' is not assignable to type 'FileNode'.
    Type '{ childImageSharp: { gatsbyImageData: any; }; }' is missing the following properties from type 'Node': parent, children, internal, idts(23

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

interface IProps {
  hero: {
    childImageSharp: {
      gatsbyImageData: any;
    };
  };
}

const HomePage = ({ data }: PageProps<IProps>) => {
  const image = getImage(data.hero!); // error here
  if (!image) {
    return null;
  }

  return <GatsbyImage image={image} alt="hero" />;
};

export const query = graphql`
  query IndexPage {
    hero: file(relativePath: { eq: "home/hero.png" }) {
      childImageSharp {
        gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
      }
    }
  }
`;

export default HomePage;

My understanding from this error is that I need to include in the query and its interface, the Node properties 'Node': parent, children, internal, id.

Is this error expected? what is the recommended way of fixing this ts error?

Thanks in advance!

Reproduction Link

https://codesandbox.io/s/get-image-typing-membno?file=/src/pages/index.tsx

Steps to Reproduce

1. From a TS project (or https://github.com/gatsbyjs/gatsby-starter-minimal-ts) + gatsby-plugin-image
2. Copy the code in the description
3. Check the type error in the getImage function

Expected Result

getImage type should not require Node properties in it.

Actual Result

getImage type requires Node properties in it.

Environment

System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^4.14.1 => 4.14.1
    gatsby-plugin-image: 2.14.1 => 2.14.1

Config Flags

None

[pettinarip]

@LekoArts I noticed that there is still an issue with this when using Gatsby’s GraphQL Typegen feature. All the image values are nullish by default and getImage is expecting undefined instead.

Update: just read your prev comment about this problem. Would be a good addition, yes.

[LekoArts]

Relevant problem that is close enough to not warrant a new issue: the getImage typing does not accept null/undefined but the documentation says that it is null safe.

This means that if you pass a node or node.childImageSharp etc. and it’s null it doesn’t crash but returns undefined from the getImage helper. But our typegen feature types it as IGatsbyImageData | null so we could add it.

---

Ok, I think I fixed it. This here doesn’t have any type errors:

import * as React from "react"
import { StaticImage, getImage, GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
import { graphql, PageProps } from "gatsby"

type DataProps = {
  file: {
    name: string
    childImageSharp: {
      gatsbyImageData: IGatsbyImageData
    }
  }
  contentfulAsset: {
    gatsbyImage: IGatsbyImageData
    filename: string
  }
}

const IndexPage: React.FC<PageProps<DataProps>> = ({ data }) => {
  const localImage = getImage(data.file)
  const contentfulImage = getImage(data.contentfulAsset)

  return (
    <main>
      <p>Static Image:</p>
      <StaticImage alt="static-image" src="../images/icon.png" width={200} />
      <p>Image from query:</p>
      {localImage && <GatsbyImage image={localImage} alt="query-image" />}
      <p>Image from contentful:</p>
      {contentfulImage && <GatsbyImage image={contentfulImage} alt="contentful-image" />}
    </main>
  )
}

export default IndexPage

export const query = graphql`
  {
    file {
      childImageSharp {
        gatsbyImageData(width: 300)
      }
      name
    }
    contentfulAsset {
      gatsbyImage(width: 300)
      filename
    }
  }
`