convertToBgImage: IGatsbyImageData is not assignable to parameter of type IGatsbyImageDataExtended

[asode]

Summary

By following the example on this project page (Gatsby 3 & gatsby-plugin-image) I'm getting a typescript error with convertToBgImage. However the example works just fine if I just ignore the error.

  const { headerBgImage } = useStaticQuery(
    graphql`
      query {
        headerBgImage: file(relativePath: { eq: "header-background.jpg" }) {
          childImageSharp {
            gatsbyImageData(
              quality: 95
              placeholder: BLURRED
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }
    `
  )
  const image = getImage(headerBgImage)
  const bgImage = convertToBgImage(image)

The error:

Argument of type 'IGatsbyImageData | undefined' is not assignable to parameter of type 'IGatsbyImageDataExtended | (string | IGatsbyImageDataExtended)[]'.

Relevant information

Now you can get around this with // @ts-ignore and it works fine. Would be of course nice to get this fixed if possible. Am I doing something wrong here?

Environment

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v14.16.0/bin/npm
  npmPackages:
    gatsby: ^3.0.1 => 3.3.1
    gatsby-background-image: ^1.5.0 => 1.5.1
    gatsby-plugin-gatsby-cloud: ^2.0.0 => 2.3.0
    gatsby-plugin-image: ^1.0.0 => 1.3.1
    gatsby-plugin-manifest: ^3.0.0 => 3.3.0
    gatsby-plugin-offline: ^4.0.0 => 4.3.0
    gatsby-plugin-postcss: ^4.1.0 => 4.3.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.3.0
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.1
    gatsby-plugin-sharp: ^3.0.0 => 3.3.1
    gatsby-source-filesystem: ^3.0.0 => 3.3.0
    gatsby-transformer-sharp: ^3.0.0 => 3.3.0
  npmGlobalPackages:
    gatsby-cli: 3.3.0

gbimage-bridge@0.1.3

[timhagn]

Hi @asode,

would you create a small reproduction case for me? As I couldn't replicate it locally within my tests and have no current TS project.

Best,

Tim.

[asode]

Hi and thanks for answering @timhagn,

Would this work?

[timhagn]

Hi @asode, thanks for the quick reply & the reproduction repo! Should work, will look into it as soon as I can : )!

EDIT: add thanks for reproduction

[timhagn]

Hi again, @asode!

Got the chance to look quickly into it & it seems that just an | undefined was missing in convertToBgImage()'s types. At least I got no more error & test were running through ^^.

Hope the just published gbimage-bridge v0.1.4 works for you (then feel free to close this issue : ). Also published patch versions of gbi(-es5) @ 1.5.2 with bumped dependencies, btw.

Best,

Tim.

[asode]

Hi there @timhagn,

what a fast fix that was! The error is gone now after updating the packages! :)

Thank you again! Keep up the good work.