sizes shouldn't be a required key in IFluidObject (Invalid prop warning)

mduecker commented 4 years ago

Description

I'm using the fluid prop to pass an array with a fluid image + gradient string to BackgroundImage

Steps to reproduce

const imgOpacity = 0.3;
const bgFluidImageStack = [
`linear-gradient(rgba(0, 0, 0, ${imgOpacity}), rgba(0, 0, 0, ${imgOpacity}))`,
 imgFluid
]
return (<BackgroundImage fluid={bgFluidImageStack} />);

Where imgFluid is a fluid image returned by gatsby-plugin-sharp

Expected result

It shouldn't show any warnings in the console.

As defined by the gatsby-plugin-sharp API it can be expected to always return:

base64 (string) src (string) width (int) height (int) aspectRatio (float) src (string) srcSet (string)

But in node_modules/gatsby-background-image/index.d.ts the fluid prop is defined as: fluid?: IFluidObject | IFluidObject[] | (IFluidObject | string)[],

And the IFluidObject goes beyond the listed keys above and also requires the sizes key:

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

Actual result

index.js:2177 Warning: Failed prop type: Invalid prop fluid supplied to BackgroundImage. in BackgroundImage (at layout.js:209) in StaticQueryDataRenderer (at gatsby-browser-entry.js:38) in StaticQuery (at layout.js:145) in Layout (at pages/index.js:79) in IndexPage (created by HotExportedIndexPage) in AppContainer (created by HotExportedIndexPage) in HotExportedIndexPage (created by PageRenderer) in PageRenderer (at json-store.js:93) in JSONStore (at root.js:51) in RouteHandler (at root.js:73) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by EnsureResources) in ScrollContext (at root.js:64) in RouteUpdates (at root.js:63) in EnsureResources (at root.js:61) in LocationHandler (at root.js:119) in LocationProvider (created by Context.Consumer) in Location (at root.js:118) in Root (at root.js:127) in _default (at app.js:67)

When passing a valid String for sizes the warning message disappears

Environment

System: OS: macOS 10.15.2 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Shell: 5.7.1 - /usr/local/bin/zsh Binaries: Node: 13.2.0 - /usr/local/bin/node Yarn: 1.21.0 - /usr/local/bin/yarn npm: 6.13.1 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 79.0.3945.117 Safari: 13.0.4 npmPackages: gatsby: 2.17.6 => 2.17.6 gatsby-background-image: ^0.9.12 => 0.9.12 gatsby-cli: ^2.8.18 => 2.8.19 gatsby-image: 2.2.30 => 2.2.30 gatsby-plugin-antd: 2.0.2 => 2.0.2 gatsby-plugin-canonical-urls: ^2.1.10 => 2.1.18 gatsby-plugin-exclude: 1.0.2 => 1.0.2 gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3 gatsby-plugin-google-gtag: ^1.1.11 => 1.1.19 gatsby-plugin-google-tagmanager: ^2.1.15 => 2.1.20 gatsby-plugin-hotjar: 1.0.1 => 1.0.1 gatsby-plugin-hubspot: ^1.3.3 => 1.3.3 gatsby-plugin-less: 3.0.12 => 3.0.12 gatsby-plugin-lodash: 3.1.13 => 3.1.13 gatsby-plugin-manifest: 2.2.25 => 2.2.25 gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0 gatsby-plugin-react-helmet: 3.1.13 => 3.1.13 gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 gatsby-plugin-robots-txt: 1.5.0 => 1.5.0 gatsby-plugin-sentry: 1.0.1 => 1.0.1 gatsby-plugin-sharp: 2.2.34 => 2.2.34 gatsby-plugin-sitemap: 2.2.19 => 2.2.19 gatsby-plugin-styled-components: 3.1.11 => 3.1.11 gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.8 => 1.1.8 gatsby-source-airtable: 2.0.9 => 2.0.9 gatsby-source-filesystem: 2.1.35 => 2.1.35 gatsby-source-prismic: 3.0.0-beta.18 => 3.0.0-beta.18 gatsby-transformer-json: 2.2.16 => 2.2.16 gatsby-transformer-sharp: 2.3.1 => 2.3.1 npmGlobalPackages: gatsby-cli: 2.8.16

timhagn commented 4 years ago

Hi @mduecker,

the TypeScript interface definitions are identical to the ones in gatsby-image, though looking through the sources of gatsby-plugin-sharp confirms your notion. So I'm just gonna make it optional and keep a look at their implementation.

Best,

Tim. EDIT: Now published as v0.9.13, hope it solves your issue! Of course you're welcome to close this issue if it does : ).

github-actions[bot] commented 4 years ago

Hi there! As @timhagn momentarily is the main contributor to this package, this issue has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs, though we're open to suggestions on how to get more maintainers! Thank you for your contributions : )!

timhagn / gatsby-background-image