fix: problem getting metadata (#227)

Uses `probe-image-size` to fetch metadata when its missing, instead of the Cloudinary `getinfo` flag. Removes the errors reported in #223, but will still not adhere to the `cloudinaryAssetData` flag.
cloudinary-community · Jan 17, 2023 · bf3e75a · bf3e75a
1 parent 34e286f
commit bf3e75a
Show file tree

Hide file tree

Showing 12 changed files with 564 additions and 112 deletions.
diff --git a/demo/gatsby-config.js b/demo/gatsby-config.js
@@ -30,7 +30,8 @@ module.exports = {
           'CloudinaryAsset',
           'ArticleFeatureImage',
           'BlogPostHeroImage',
-          'SomeBadImageData',
+          'VariedData',
+          'EmptyDataCloudinary',
         ],
       },
     },

diff --git a/demo/gatsby-node.js b/demo/gatsby-node.js
@@ -6,34 +6,193 @@ exports.sourceNodes = (gatsbyUtils) => {
     gatsbyUtils;
   const { createNode } = actions;
 
-  const cloudinaryData = {
-    cloudName: 'lilly-labs-consulting',
-    publicId: 'sample',
-  };
-
-  createNode({
-    id: createNodeId(`GoodData >>> 1`),
-    name: 'GoodData',
-    ...cloudinaryData,
-    internal: {
-      type: 'SomeBadImageData',
-      contentDigest: createContentDigest(cloudinaryData),
+  const variedData = [
+    {
+      name: 'No assed info',
+      expected: 'No image',
+    },
+    {
+      name: 'Non existing asset without metadata',
+      expected: 'No image',
+      cloudName: 'not-a-good-cloudName',
+      publicId: 'sample',
+    },
+    {
+      name: 'Non existing asset with metadata',
+      expected: 'Broken image',
+      cloudName: 'not-a-good-cloudName',
+      publicId: 'sample',
+      originalHeight: 400,
+      originalWidth: 300,
+      originalFormat: 'png',
+    },
+    {
+      name: 'Asset without metadata',
+      expected: 'Rastered image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'sample',
+    },
+    {
+      name: 'Asset with metadata',
+      expected: 'Rastered image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'sample',
+      originalWidth: 864,
+      originalHeight: 576,
+      // No originalFormat
+      // originalFormat: 'jpg',
+    },
+    {
+      name: 'Video without metadata',
+      expected: 'No image - in future: rastered image ',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse mime types/chop-chop-video.mp4',
+    },
+    {
+      name: 'Video with metadata',
+      expected: 'Broken image - in future: rastered image ',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse mime types/chop-chop-video.mp4',
+      originalHeight: 1800,
+      originalWidth: 1800,
+      originalFormat: 'mp4',
+    },
+    {
+      name: 'Video with metadata - jpg',
+      expected: 'Broken image - in future: rastered image ',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse mime types/chop-chop-video.mp4',
+      originalHeight: 1800,
+      originalWidth: 1800,
+      originalFormat: 'jpg',
+    },
+    {
+      name: 'Gif without metadata',
+      expected: 'Animated image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/giphyCat.gif',
+    },
+    {
+      name: 'Gif with metdata',
+      expected: 'Animated image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/giphyCat.gif',
+      originalWidth: 480,
+      originalHeight: 315,
+      originalFormat: 'gif',
+    },
+    {
+      name: 'Gif with metdata - png',
+      expected: 'Animated image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/giphyCat.gif',
+      originalWidth: 480,
+      originalHeight: 315,
+      // Wrong original format
+      originalFormat: 'png',
+    },
+    {
+      name: 'Pdf without metadata',
+      expected: 'Rastered image of first page',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/en-US-YearCompass-booklet.pdf',
     },
+    {
+      name: 'Pdf with metadata',
+      expected: 'Rastered image of first page',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/en-US-YearCompass-booklet.pdf',
+      originalWidth: 1650,
+      originalHeight: 1275,
+      originalFormat: 'pdf',
+    },
+    {
+      name: 'Pdf with metadata - jpg',
+      expected: 'Rastered image of first page',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/en-US-YearCompass-booklet.pdf',
+      originalWidth: 1650,
+      originalHeight: 1275,
+      // Wrong original format
+      originalFormat: 'jpg',
+    },
+    {
+      name: 'Svg without metdata',
+      expected: 'Rastered image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/bubble-gum-ice-skating.svg',
+    },
+    {
+      name: 'Svg with metdata',
+      expected: 'Rastered image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/bubble-gum-ice-skating.svg',
+      originalHeight: 3000,
+      originalWidth: 3000,
+      originalFormat: 'svg',
+    },
+    {
+      name: 'Svg with metdata - png',
+      expected: 'Rastered image',
+      cloudName: 'lilly-labs-consulting',
+      publicId: 'diverse%20mime%20types/bubble-gum-ice-skating.svg',
+      originalHeight: 3000,
+      originalWidth: 3000,
+      // Wrong original format
+      originalFormat: 'png',
+    },
+  ];
+
+  variedData.forEach((asset, key) => {
+    createNode({
+      id: createNodeId(`VariedData >>> ${key}`),
+      ...asset,
+      internal: {
+        type: 'VariedData',
+        contentDigest: createContentDigest(asset),
+      },
+    });
+
+    reporter.info(`[site] Create VariedData: ${asset.name}`);
   });
 
-  createNode({
-    id: createNodeId(`BadData >>> 2`),
-    name: 'BadData',
-    internal: {
-      type: 'SomeBadImageData',
-      contentDigest: createContentDigest({}),
+  const emptyData = [
+    { name: 'Empty data', expected: 'No image', cloudinary: {} },
+    { name: 'Undefined data', expected: 'No image', cloudinary: undefined },
+    { name: 'Null data', expected: 'No image', cloudinary: null },
+    {
+      name: 'Non empty data',
+      expected: 'An image',
+      cloudinary: { cloudName: 'lilly-labs-consulting', publicId: 'sample' },
     },
+  ];
+
+  emptyData.forEach((asset, key) => {
+    createNode({
+      id: createNodeId(`EmptyData >>> ${key}`),
+      ...asset,
+      internal: {
+        type: 'EmptyData',
+        contentDigest: createContentDigest(asset),
+      },
+    });
+
+    reporter.info(`[site] Create EmptyData: ${key}`);
   });
 
+  const sampleAsset = {
+    name: 'Asset with metadata',
+    cloudName: 'lilly-labs-consulting',
+    publicId: 'sample',
+    originalWidth: 864,
+    originalHeight: 576,
+    originalFormat: 'jpg',
+  };
+
   const blogPostData1 = {
     title: 'Blog Post Example One',
     slug: 'post-1',
-    heroImage: cloudinaryData,
+    heroImage: sampleAsset,
   };
 
   createNode({
@@ -51,7 +210,7 @@ exports.sourceNodes = (gatsbyUtils) => {
     title: 'Article Example One',
     slug: 'article-1',
     feature: {
-      image: cloudinaryData,
+      image: sampleAsset,
     },
   };
 

diff --git a/demo/src/pages/manual-tests/no-data.js b/demo/src/pages/manual-tests/no-data.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+
+const EmptyDataPage = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      allEmptyData {
+        nodes {
+          name
+          expected
+          cloudinary {
+            gatsbyImageData(width: 200, backgroundColor: "#BADA55")
+          }
+        }
+      }
+    }
+  `);
+
+  return data.allEmptyData.nodes.map((node, index) => {
+    const gatsbyImage = getImage(node.cloudinary);
+
+    return (
+      <>
+        <h2>{node.name}</h2>
+        <div>
+          <strong>Expected:</strong> {node.expected}
+        </div>
+        {gatsbyImage ? (
+          <GatsbyImage key={index} image={gatsbyImage} alt={node.name} />
+        ) : (
+          <div>No image for node with name: {node.name}</div>
+        )}
+      </>
+    );
+  });
+};
+
+export default EmptyDataPage;
diff --git a/demo/src/pages/manual-tests/varied-data.js b/demo/src/pages/manual-tests/varied-data.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+
+const VariedDataPage = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      allVariedData {
+        nodes {
+          name
+          expected
+          gatsbyImageData(height: 200, backgroundColor: "#BADA55")
+        }
+      }
+    }
+  `);
+
+  return data.allVariedData.nodes.map((node, index) => {
+    const gatsbyImage = getImage(node);
+
+    return (
+      <>
+        <h2>{node.name}</h2>
+        <div>
+          <strong>Expected:</strong> {node.expected}
+        </div>
+        {gatsbyImage ? (
+          <GatsbyImage key={index} image={gatsbyImage} alt={node.name} />
+        ) : (
+          <div>No image for node with name: {node.name}</div>
+        )}
+      </>
+    );
+  });
+};
+
+export default VariedDataPage;
diff --git a/demo/src/pages/somebaddata.js b/demo/src/pages/somebaddata.js
diff --git a/plugin/gatsby-plugin-image/asset-data.js b/plugin/gatsby-plugin-image/asset-data.js
@@ -1,17 +1,27 @@
 const axios = require('axios');
+const probe = require('probe-image-size');
 const { generateCloudinaryAssetUrl } = require('./generate-asset-url');
 
-const cache = {};
+const dataCache = {};
+const probeCache = {};
 
 const getData = async (url, options) => {
-  if (!cache[url]) {
-    cache[url] = axios.get(url, options);
+  if (!dataCache[url]) {
+    dataCache[url] = axios.get(url, options);
   }
 
-  const { data } = await cache[url];
+  const { data } = await dataCache[url];
   return data;
 };
 
+const probeImage = async (url) => {
+  if (!probeCache[url]) {
+    probeCache[url] = probe(url);
+  }
+
+  return await probeCache[url];
+};
+
 exports.getAssetAsTracedSvg = async ({ source, args }) => {
   const svgUrl = generateCloudinaryAssetUrl({
     publicId: source.publicId,
@@ -36,11 +46,14 @@ exports.getAssetMetadata = async ({ source, args }) => {
     publicId: source.publicId,
     cloudName: source.cloudName,
     options: args,
-    flags: 'getinfo',
   });
 
-  const data = await getData(metaDataUrl);
-  return data.output;
+  const result = await probeImage(metaDataUrl);
+  return {
+    width: result.width,
+    height: result.height,
+    format: result.type,
+  };
 };
 
 exports.getUrlAsBase64Image = async (url) => {