Querying images already uploaded to Cloudinary about gatsby-transformer-cloudinary HOT 8 CLOSED

@MadsMadsDk I think the JSON nodes need to exist before the Cloudinary transformer runs or these would get missed (in this order, the JSON is added after Cloudinary ran) — could you try swapping the order and see if that makes a difference?

from gatsby-transformer-cloudinary.

@jlengstorf That doesn't seem to work either.

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `My cool site with cloudinary stuff on it`,
    description: `Cool description`,
    author: `@CodeMostly`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/data/posts`,
      },
    },
    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "MyCustomGraphQL",
        fieldName: "customGraphql",
        url: "<super-secret-url>",
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: "gatsby-transformer-cloudinary",
      options: {
        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `name`,
        short_name: `Short`,
        start_url: `/`,
        background_color: `#08101d`,
        theme_color: `#f18805`,
        display: `minimal-ui`,
        icon: `static/icon.svg`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

I changed the order of the plugins in the above config, but it doesn't yield any new results. Still getting the data describing the Cloudinary asset :/

Also tried deleting node_modules and reinstalling, and ran gatsby clean as well, to no avail.

from gatsby-transformer-cloudinary.

@MadsMadsDk could you run that query in GraphiQL and post a screenshot of the fulll browser tab including the query and results? Do you have a public repo where this is happening that you could share? Could you share the logs that are printed when you run gatsby develop?

from gatsby-transformer-cloudinary.

I tried to reproduce your issue, and the transformer worked fine for me 😕 . I don't know what the problem could be.

# src/images/hello.json
{
  "title": "Hello!",
  "coverPhoto": {
    "cloudinaryAssetData": true,
    "cloudName": "taskrabbit-com",
    "publicId": "uxhsxpdrhicg0u6m6bpk",
    "originalWidth": 1540,
    "originalHeight": 420
  }
}

# gatsby-config.ts

...

export const plugins = [
  ...,
  {
    resolve: "gatsby-source-filesystem",
    options: {
      name: "images",
      path: `${__dirname}/src/images`,
    },
  },
  ...,
  {
    resolve: "gatsby-transformer-cloudinary",
    options: {
      apiKey: process.env.CLOUDINARY_API_KEY,
      apiSecret: process.env.CLOUDINARY_API_SECRET,
      cloudName: process.env.CLOUDINARY_CLOUD_NAME,

      uploadFolder: process.env.CLOUDINARY_UPLOAD_FOLDER,
      fluidMaxWidth: 1920,
      breakpointsMaxImages: 5,

      createDerived: false,
      overwriteExisting: false,
      useCloudinaryBreakpoints: false,
    },
  },
  "gatsby-transformer-json",
];

from gatsby-transformer-cloudinary.

@kurttomlinson

I've figured out what the issue is.

This only works if the query is on the top-level of an entity. As soon as an image is nested in a query more than 2 levels deep, it doesn't work any longer.

Also, any other information passed alongside the cloudinary asset data is discarded, when the image is transformed.

I've created a repository here to reproduce the issue: https://github.com/MadsMadsDk/gatsby-cloudinary-broken-transformer

from gatsby-transformer-cloudinary.

@MadsMadsDk Thanks for the reproduction repository! I hope to take a look at this this weekend.

from gatsby-transformer-cloudinary.

@MadsMadsDk When you say "more than 2 levels deep", you mean you have some source data where your Cloudinary asset data is not a top-level property? Like this?

# src/images/hello.json
{
  "title": "Hello!",
  "images": {
    "coverPhoto": {
      "cloudinaryAssetData": true,
      "cloudName": "taskrabbit-com",
      "publicId": "uxhsxpdrhicg0u6m6bpk",
      "originalWidth": 1540,
      "originalHeight": 420
    }
  }
}

If yes, that's due to the way gatsby-transformer-cloudinary is searching nodes for cloudinary asset data. It only checks the top-level properties of each node:

https://github.com/cloudinary-devs/gatsby-transformer-cloudinary/blob/c2f2a8c2ed778c4b382be6523e6f8ecccc7d5170/packages/gatsby-transformer-cloudinary/gatsby-node/create-asset-nodes-from-data.js#L3-L25

I think that updating the code to search recursively wouldn't be too challenging, and I don't see any obvious downsides to doing so.

As for your second issue with discarded data, that's explained by the same chunk of code linked above. gatsby-transformer-cloudinary deletes any top-level properties that have a subproperty where cloudinaryAssetData === true. This is done so that gatsby-transformer-cloudinary can have full control over the shape of the CloudinaryAsset node that gets created. If it doesn't have full control, then we can end up with some CloudinaryAsset nodes having different shapes than others. This confuses Gatsby when it's building a schema for the GraphQL layer.

The shape of CloudinaryAsset is strictly defined to allow Gatsby to build more quickly: https://github.com/cloudinary-devs/gatsby-transformer-cloudinary/blob/cffc662b40f57c1e5e9182b19d85a911feab8137/packages/gatsby-transformer-cloudinary/gatsby-node.js#L33-L50

I don't think we should change this because of the issues relating to Gatsby's schema generation.

from gatsby-transformer-cloudinary.

Done in #57! 🥳

from gatsby-transformer-cloudinary.