Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[gatsby-image] Bad schema typing for gatsby-images ? #17003

Closed
slorber opened this issue Aug 23, 2019 · 10 comments · Fixed by #20314
Closed

[gatsby-image] Bad schema typing for gatsby-images ? #17003

slorber opened this issue Aug 23, 2019 · 10 comments · Fixed by #20314
Labels
topic: media Related to gatsby-plugin-image, or general image/media processing topics type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@slorber
Copy link
Contributor

slorber commented Aug 23, 2019

Hi,

The TS defs for a fluid image is:

export interface FluidObject {
  aspectRatio: number
  src: string
  srcSet: string
  sizes: string
  base64?: string
  tracedSVG?: string
  srcWebp?: string
  srcSetWebp?: string
  media?: string
}

Yet if we look at a graphql image fragment like this one, we can notice they are actually incompatible:

image

The GraphQL schema says that all those attributes can be undefined (which does not really make sense to me, is it possible to have an image without at least an src?)

The problem is that if you try to generate typedefs from generic queries, you'll end up with incompatible typings and will have to find workarounds (like using "any").

Otherwise you'll get typescript errors like this:

[0] src/page/home/queries/Images.tsx(54,3): error TS2322: Type 'Pick<ImageSharpFluid, "src" | "sizes" | "srcSet" | "aspectRatio" | "tracedSVG" | "srcWebp" | "srcSetWebp">[]' is not assignable to type 'Pick<FluidObject, "media" | "src" | "base64" | "sizes" | "srcSet" | "tracedSVG" | "srcWebp" | "srcSetWebp">[]'.
[0]   Type 'Pick<ImageSharpFluid, "src" | "sizes" | "srcSet" | "aspectRatio" | "tracedSVG" | "srcWebp" | "srcSetWebp">' is not assignable to type 'Pick<FluidObject, "media" | "src" | "base64" | "sizes" | "srcSet" | "tracedSVG" | "srcWebp" | "srcSetWebp">'.

I suggest to make those types compatible so that people using tools like graphql-codegen can easily use gatsby images

@gatsbot gatsbot bot added the type: question or discussion Issue discussing or asking a question about Gatsby label Aug 23, 2019
@lannonbr lannonbr added the topic: media Related to gatsby-plugin-image, or general image/media processing topics label Aug 27, 2019
@lannonbr lannonbr changed the title Bad schema typing for gatsby-images ? [gatsby-image] Bad schema typing for gatsby-images ? Aug 27, 2019
@daugsbi
Copy link
Contributor

daugsbi commented Sep 2, 2019

I experience the same problem with TypeScript generation.
Also relevant for gatsby-source-contentful, as well as the FixedObject.

Instead of weaken the types of gatsby-image, this should be addressed in the schema. As a result we can distinguish between fluid and fixed object and get a type error when used wrong.

@slorber
Copy link
Contributor Author

slorber commented Sep 2, 2019

Yeah, not really for weakening the types either :)

I'd rather have gatsby image being a graphql union type and being more precise on the schema typings, like union ImageSharpFluid = ImageSharpFluidWithSVG | ImageSharpFluidWebp | ...

@gatsbot
Copy link

gatsbot bot commented Sep 23, 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

@gatsbot gatsbot bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Sep 23, 2019
@daugsbi
Copy link
Contributor

daugsbi commented Sep 24, 2019

Not stale

@gatsbot
Copy link

gatsbot bot commented Oct 5, 2019

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

@gatsbot gatsbot bot closed this as completed Oct 5, 2019
@bsgreenb
Copy link

Can we re-open? Not stale.

@slorber slorber reopened this Oct 30, 2019
@gatsbot
Copy link

gatsbot bot commented Nov 10, 2019

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

@gatsbot gatsbot bot closed this as completed Nov 10, 2019
@Kerumen
Copy link
Contributor

Kerumen commented Dec 17, 2019

Stumbled upon the same problem today. I think this should be reconsidered..

@Kerumen Kerumen reopened this Dec 17, 2019
@github-actions github-actions bot removed the stale? Issue that may be closed soon due to the original author not responding any more. label Dec 18, 2019
@github-actions
Copy link

github-actions bot commented Jan 7, 2020

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

@github-actions github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Jan 7, 2020
@daugsbi
Copy link
Contributor

daugsbi commented Jan 7, 2020

Not so spooky anymore 👻

Please review my pull request which should resolve the problem for Contentful and ImageSharp

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: media Related to gatsby-plugin-image, or general image/media processing topics type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants