TypeScript error tells me "Property 'fluid' does not exist on type 'GatsbyImage'"

Question

In Gatsby, I have used a page query to retrieve some data:

allContentfulArtwork(sort: { fields: [artistName], order: ASC }) {
  edges {
    node {
      image {
        fluid(resizingBehavior: SCALE) {
          ...GatsbyContentfulFluid
        }
      }
      altTag
      title
      artistName
      countryOfOrigin
      contentful_id
    }
  }
}

I save the result of this query in a variable called artworkData. I have a React component that accepts this data in props to render it to the page (props unrelated to this question are marked with * and can be ignored):

{artworkData.edges.map((artwork) => {
  return (
    <Artwork
      *alreadyVoted={alreadyVoted}
      altTag={artwork.node.altTag}
      artistName={artwork.node.artistName}
      contentful_id={artwork.node.contentful_id}
      countryOfOrigin={artwork.node.countryOfOrigin}
      *hasVoted={hasVoted}
      image={artwork.node.image}
      key={artwork.node.contentful_id}
      *location={location}
      title={artwork.node.title}
      ></Artwork>
  );
})}

I have defined the shape of Artwork component's props in the following TypeScript interface:

interface ArtworkProps {
  alreadyVoted(): void;
  altTag: string;
  artistName: string;
  contentful_id: string;
  countryOfOrigin: string;
  hasVoted: boolean;
  image: GatsbyImage;
  location: GatsbyRouteComponentProps;
  title: string;
}

I destructure my props and use them in the component (styled component definitions ommitted for brevity):

const Artwork: React.FC<ArtworkProps> = ({ alreadyVoted, altTag, artistName, contentful_id, countryOfOrigin, hasVoted, image, location, title }) => {
  return (
    <ArtworkWrapper>
      <Img fluid={image.fluid} alt={altTag ? altTag : title}></Img>
    < /ArtworkWrapper>

    // a bunch of additional render code
  )
}

Unfortunately, TypeScript says "Property 'fluid' does not exist on type 'GatsbyImage'.ts(2339)"

Well, I think it does, because an Img component in Gatsby has a fluid property that you use to pass the fluid data for rendering. As far as I can see from looking through the index.d.ts file in Gatsby Image, this property does exist. If we follow the heirarchy, the class GatsbyImage contains the type GatsbyImageProps, which can be either GatsbyImageFluidProps interface or GatsbyImageFixedProps interface; GatsbyImageFluidProps has the fluid property defined.

I am using gatsby 2.26.1, gatsby-image 2.5.0, TypeScript 4.0.5. Warning showing in VSCode 1.51.1.

@FerranBuireu Indeed, the data is coming in correctly across the board. I can see the image itself, it's just the typing that's the issue. — adstr123, Nov 18 '20 at 22:50

score 0 · Answer 1 · answered Nov 18 '20 at 01:09

0

You seem like importing GatsbyImage class whose incoming prop is GatsbyImageProps and GatsbyImage class does not export anything other than itself.

You want to import GatsbyImageProps https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/index.d.ts#L65 instead and assign it to your Artwork component's props type.

answered Nov 18 '20 at 01:09

Rikin

5,351
2
15
22

So are you suggesting that I change the type in my interface of `image` to `GatsbyImageProps`? I tried this and unfortunately it made no difference. In fact, the error remains the same - `Property 'fluid' does not exist on type 'GatsbyImage'`. I think therefore that TS is overriding my declaration with its inference in some way? If I am excplicitly stating it is of type `GatsbyImageProps`, how can it continue to give me errors related to `GatsbyImage`? – adstr123 Nov 18 '20 at 22:53

TypeScript error tells me "Property 'fluid' does not exist on type 'GatsbyImage'"

1 Answers1