Code Monkey home page Code Monkey logo

Comments (7)

olavea avatar olavea commented on June 16, 2024 3

I'll ask my senior dev to send you an email. I'm sure she would like us to have a chat with you about this problem. It is relevant to our work.
😺 👍

from gatsby-transformer-cloudinary.

jasloe avatar jasloe commented on June 16, 2024 1

Just replicated this issue on a clean Gatsby codebase, a new Contentful space, and a new Cloudinary environment.

Confirming that this works as expected:

query MyQuery {
  allCloudinaryMedia {
    nodes {
      gatsbyImageData
    }
  }
}

But this doesn't:

query MyQuery {
  contentfulArtwork {
    images {
      gatsbyImageData
    }
  }
}

returns...

{
  "data": {
    "contentfulArtwork": {
      "images": [
        {
          "gatsbyImageData": null
        }
      ]
    }
  },
  "extensions": {}
}

My environment:

  System:
    OS: macOS 12.6.3
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Firefox: 89.0.2
  npmPackages:
    gatsby: ^5.11.0 => 5.11.0
    gatsby-plugin-image: ^3.11.0 => 3.11.0
    gatsby-plugin-sharp: ^5.11.0 => 5.11.0
    gatsby-source-cloudinary: ^0.5.1 => 0.5.1
    gatsby-source-contentful: ^8.11.0 => 8.11.0
    gatsby-transformer-cloudinary: ^4.4.0 => 4.4.0
    gatsby-transformer-sharp: ^5.11.0 => 5.11.0
  npmGlobalPackages:
    gatsby-cli: 5.7.0

from gatsby-transformer-cloudinary.

raae avatar raae commented on June 16, 2024

The shape of contentfulArtworkCloudinaryImageJsonNode does not match the shape that the transformer plugin expects, but you may connect the sourced CloudinaryMedia to your contentfulArtworkCloudinaryImageJsonNode nodes.

exports.createSchemaCustomization = async ({ actions }) => {
  actions.createTypes(`
    type contentfulArtworkCloudinaryImageJsonNode implements Node {
      cloudinaryMedia: CloudinaryMedia @link(by: "publicId", from: "public_id")
    }
  `);
};

Then you'd need to add one level to get the gatsbyImageData query, doing

       cloudinaryMedia {
          gatsbyImageData(width: 200)
        }

from gatsby-transformer-cloudinary.

AminPainter avatar AminPainter commented on June 16, 2024

Try this:
#246 (comment)

from gatsby-transformer-cloudinary.

raae avatar raae commented on June 16, 2024

Thank you @AminPainter !

from gatsby-transformer-cloudinary.

raae avatar raae commented on June 16, 2024

I would be forever grateful if you tested the newest beta jasloe. It adds support by letting you configure the mapping of data.

yarn add [email protected]

Take a look at the documentation and let me know how it goes so I may improve if needed.

from gatsby-transformer-cloudinary.

raae avatar raae commented on June 16, 2024

@jasloe have you been able to test the 4.6.0-beta.1? Looking to make this a current version, but would love an external test before I do.

from gatsby-transformer-cloudinary.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.