fix(gatsby-image): Fix typings for fixed and fluid props

[schwartzmj]

Description

GatsbyImage should require one of "fluid" or "fixed". Currently they are both optional.

Documentation

Self documenting types. Not changing file exports.

Related Issues

[schwartzmj]

I believe this is important because if an <Img /> component receives an undefined or null fixed or fluid prop, Typescript won't yell at you.

Once the site is live, the page crashes to a white screen with error Cannot read property '0' of undefined.

This isn't something that can always be caught in development because a template may pull in images and generate pages dynamically.

[ascorbic]

This is great. It is technically a breaking change though, because people could be using the old deprecated props resolutions and sizes. Could you mitigate that by adding @deprecated jsdoc comments to those? e.g.

  /**
   * @deprecated Use `fixed`
   */
  resolutions?: FixedObject

[schwartzmj]

Sounds good, I've made those adjustments. If you have any other suggestions let me know!

[ascorbic]

@schwartzmj Could you check the types in the IE polyfill. It's currently failing typechecks

[schwartzmj]

Could you check the types in the IE polyfill. It's currently failing typechecks

Good catch. I've made some changes to account for that. It looks like the "Gatsby Build Service" is failing. Anything on my end I need to fix?

[sidharthachatterjee]

This is good to go. Thanks @schwartzmj!

Changes were made

[henrikra]

This change made TypeScript compiler fail with styled-components. With gatsby-image up to 2.4.15 it compiles fine but soon as I update to 2.4.16 or newer compilation fails. Can you guys fix it?

Here is the code

[antoinerousseau]

As @henrikra mentioned:

Until gatsby-image 2.4.15, I was doing this, using styled-components:

const Photo = styled(Image)`
  /* some css */
`

And then

<Photo fluid={photo.fluid} />

But since gatsby-image 2.4.16 (this PR), I'm getting this TypeScript error:

 No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<(GatsbyImageFluidProps & { objectFit?: "fill" | "none" | "contain" | "cover" | "scale-down"; objectPosition?: string; } & RefAttributes<GatsbyImageWithIEPolyfill>) | (GatsbyImageFixedProps & ... 1 more ... & RefAttributes<...>), "ref" | ... 23 more ... | "objectPosition"> & Partial<...>, "ref" | ... 23 more ... | "objectPosition"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ className: string; fluid: FluidObject; alt: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<(GatsbyImageFluidProps & { objectFit?: "fill" | "none" | "contain" | "cover" | "scale-down"; objectPosition?: string; } & RefAttributes<...>) | (GatsbyImageFixedProps & ... 1 more ... & RefAttributes<...>), "ref" | ... 23 more ... | "objectPosition"> & Partial<...>, "ref" | ... 23 mor...'.
      Property 'fluid' does not exist on type 'IntrinsicAttributes & Pick<Pick<(GatsbyImageFluidProps & { objectFit?: "fill" | "none" | "contain" | "cover" | "scale-down"; objectPosition?: string; } & RefAttributes<...>) | (GatsbyImageFixedProps & ... 1 more ... & RefAttributes<...>), "ref" | ... 23 more ... | "objectPosition"> & Partial<...>, "ref" | ... 23 mor...'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof GatsbyImageWithIEPolyfill, any, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof GatsbyImageWithIEPolyfill, any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ className: string; fluid: FluidObject; alt: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<(GatsbyImageFluidProps & { objectFit?: "fill" | "none" | "contain" | "cover" | "scale-down"; objectPosition?: string; } & RefAttributes<...>) | (GatsbyImageFixedProps & ... 1 more ... & RefAttributes<...>), "ref" | ... 23 more ... | "objectPosition"> & Partial<...>, "ref" | ... 23 mor...'.
      Property 'fluid' does not exist on type 'IntrinsicAttributes & Pick<Pick<(GatsbyImageFluidProps & { objectFit?: "fill" | "none" | "contain" | "cover" | "scale-down"; objectPosition?: string; } & RefAttributes<...>) | (GatsbyImageFixedProps & ... 1 more ... & RefAttributes<...>), "ref" | ... 23 more ... | "objectPosition"> & Partial<...>, "ref" | ... 23 mor...'.

86             <Photo fluid={photo.fluid} />
                      ~~~~~

[moshie]

When using the GatsbyImageProps as a type on an image you run into:

Property 'fluid' does not exist on type 'GatsbyImageFixedProps'

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#unions-with-common-fields

[aquelehugo]

I think the issue goes back to styled-components: styled-components/styled-components#3385

[henrikra]

Good finding @aquelehugo .

Please guys show your support at styled-components/styled-components#3385 so we get this annoying bug resolved!

[henrikra]

There is now PR which fixes this problem! DefinitelyTyped/DefinitelyTyped#51252