cloudinary-community / gatsby-transformer-cloudinary

Use Cloudinary images with gatsby-image for high performance and total control!
https://gatsby-transformer-cloudinary.netlify.app/
MIT License
69 stars 28 forks source link

Cannot read property 'fluid' of null #3

Closed mduecker closed 5 years ago

mduecker commented 5 years ago

Hi Jason, I just discovered your package and tried out the demo example site.

After running gatsby develop I get the following error when trying to load the site: Cannot read property 'fluid' of null

This is related to the following error during build (gatsby develop):

The GraphQL query from /Users/markus/repositories/Bitbucket/gatsby-cloudinary/src/examples/fluid-silly.js failed.

Errors:
  Request failed with status code 400

  GraphQL request:4:7
  4 |       fluid(transformations: ["e_blackwhite"], chained: ["e_vectorize:colors:2:d
    |       ^
    | especkle:20,e_tint:100:tomato:0p:white:100p", "l_beard_png,w_0.77,fl_relative,g_
Plugin:
  none
Query:
  query usersMarkusRepositoriesBitbucketGatsbyCloudinarySrcExamplesFluidSillyJs3123034595 {
    image: file(name: {eq: "marisa"}) {
      cloudinary: childCloudinaryAsset {
        fluid(transformations: ["e_blackwhite"], chained: ["e_vectorize:colors:2:despeckle:20,e_tint:100:tomato:0p:white:100p", "l_beard_png,w_0.77,fl_relative,g_face,a_-5,y_0.06"]) {
          ...CloudinaryAssetFluid
        }
      }
    }
  }

  fragment CloudinaryAssetFluid on CloudinaryAssetFluid {
    aspectRatio
    base64
    sizes
    src
    srcSet
  }
mduecker commented 5 years ago

I think I found the problem: l_beard_png is the key to an image in your repo?

Then it's no wonder Cloudinary throws an error here.

Same with chained: ["t_lwj"] in fixed-chaining.js and gif-transformed.js

jlengstorf commented 5 years ago

Oh, whoops. Yeah, I didn't actually expect folks to try and run the demo with those images in place. 😕

I don't think we can demo overlays without referencing images in the account. Named transforms are also a cool feature to highlight that are tied to the account.

I'm not sure what the proper solution is. A disclaimer, maybe?

mduecker commented 5 years ago

I'm not sure what the proper solution is. A disclaimer, maybe?

I agree the overlay feature is very neat to show in the demo. Just putting a disclaimer/setup instructions that the demo expects these images to be there would be fine for me 🙂

jlengstorf commented 5 years ago

Okay, cool. I'll add this to my Todo list. Thanks!

jlengstorf commented 5 years ago

Unless someone wants to get their Hacktoberfest underway?

jlengstorf commented 5 years ago

Closed by #7