Move imageMeta to field on top level File object to solve deprecation warning

gatsby-node.js

@@ -98,7 +98,7 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData, imagePath) {
     }
   }
 
-  const vibrant = processColors(vibrantData, imagePath);
+  const vibrant = vibrantData ? processColors(vibrantData, imagePath) : null;
 
 
   return {
@@ -111,22 +111,20 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData, imagePath) {
 }
 
 
-exports.onCreateNode = async function ({ node, getNode, actions }) {
+exports.onCreateNode = async function ({ node, actions }) {
   const { createNodeField } = actions;
-  if (node.internal.type === 'ImageSharp') {
-    const parent = getNode(node.parent);
-
-    const file = await readFile(parent.absolutePath);
+  if (node.internal.type === 'File' && node.sourceInstanceName === 'gallery') {
+    const file = await readFile(node.absolutePath);
     const iptcData = iptc(file);
-    const exifData = await read(parent.absolutePath);
-    const vibrantData = await Vibrant.from(parent.absolutePath)
-      .quality(2)
+    const exifData = await read(node.absolutePath);
+    const vibrantData = await Vibrant.from(node.absolutePath)
+      .quality(3)
       .getPalette();
 
     createNodeField({
       node,
       name: 'imageMeta',
-      value: transformMetaToNodeData(exifData, iptcData, vibrantData, parent.absolutePath),
+      value: transformMetaToNodeData(exifData, iptcData, vibrantData, node.absolutePath),
     });
   }
 };
@@ -145,11 +143,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
             node {
               relativePath,
               base,
-              childImageSharp {
-                fields {
-                  imageMeta {
-                    dateTaken
-                  }
+              fields {
+                imageMeta {
+                  dateTaken
                 }
               }
             }
@@ -168,8 +164,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   //   new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], a)).getTime() - new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'],b)).getTime();
   
   const edges = R.sort(R.descend((edge) => 
-    new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge))),
+    new Date(R.path(['node', 'fields', 'imageMeta', 'dateTaken'], edge))),
   galleryImages.data.allFile.edges);
+  console.log('edges', edges[0].node.fields.imageMeta);
 
   edges.forEach(({ node }, index) => {
     const nextImage = index === edges.length - 1
@@ -178,8 +175,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     const prevImage = index === 0
       ? null
       : edges[index - 1].node.base;
-
-    createPage({
+    const page = {
       path: `photogallery/${node.base}`,
       component: galleryImageTemplate,
       context: {
@@ -187,6 +183,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         nextImage,
         prevImage,
       },
-    });
+    };
+    console.log('page', page);
+    createPage(page);
   });
 };

src/components/GalleryImage/GalleryImage.js

@@ -68,7 +68,6 @@ const GalleryImage = ({ data, pageContext }) => {
   const vibrant = getVibrant(image, true);
 
   const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col';
-  console.log(ar, orientationClasses);
   const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
   const dateTaken = React.useMemo(() => new Date(meta.dateTaken), [meta]);
   return (<>
@@ -158,24 +157,24 @@ export const query = graphql`
             # placeholder: TRACED_SVG
             height: 2160
           )
-          fields {
-            imageMeta {
-              dateTaken
-              iptc {
-                caption
-                object_name
-                keywords
-                city
-                province_or_state
-              }
-              exif {
-                FNumber
-                ExposureTime
-                ISO
-              }
-              vibrant {
-                ...VibrantColors
-              }
+        }
+        fields {
+          imageMeta {
+            dateTaken
+            iptc {
+              caption
+              object_name
+              keywords
+              city
+              province_or_state
+            }
+            exif {
+              FNumber
+              ExposureTime
+              ISO
+            }
+            vibrant {
+              ...VibrantColors
             }
           }
         }

src/components/MasonryGallery.js

@@ -11,7 +11,6 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
   const breakpoints = React.useMemo(() => 
     R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
   , [itemsPerRowByBreakpoint]);
-  console.log(breakpoints);
 
   const { breakpoint } = useBreakpoint(breakpoints, 'sm');
 

src/fragments.js

@@ -1,7 +1,7 @@
 import { graphql } from 'gatsby';
 
 export const VibrantColorsFragment = graphql`
-  fragment VibrantColors on ImageSharpFieldsImageMetaVibrant {
+  fragment VibrantColors on FileFieldsImageMetaVibrant {
     DarkMuted
     DarkVibrant
     LightMuted

src/pages/index.js

@@ -175,13 +175,8 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
 export const query = graphql`
 {
   allFile(
-    filter: {
-      sourceInstanceName: {eq: "gallery"},
-      # images that don't work well
-      # base: {nin: ["DSC06517.jpg"]}
-      # childrenImageSharp: {elemMatch: {fluid: {aspectRatio: {lte: 1.3}}}}
-      },
-    sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
+    filter: { sourceInstanceName: {eq: "gallery"} }
+    sort: {order: DESC, fields: fields___imageMeta___dateTaken}
   ) {
     edges {
       node {
@@ -196,11 +191,11 @@ export const query = graphql`
             placeholder: NONE
             breakpoints: [750, 1080, 1366, 1920, 2560]
           )
-          fields {
-            imageMeta {
-              vibrant {
-                ...VibrantColors
-              }
+        }
+        fields {
+          imageMeta {
+            vibrant {
+              ...VibrantColors
             }
           }
         }

src/pages/photogallery.js

@@ -56,33 +56,26 @@ export const query = graphql`
 query GalleryPageQuery {
   allFile(
     filter: { sourceInstanceName: { eq: "gallery" } }
-    sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
+    sort: {order: DESC, fields: fields___imageMeta___dateTaken}
   ) {
     edges {
       node {
-      	relativePath,
-        base,
+      	relativePath
+        base
         childImageSharp{
           fluid {
             aspectRatio
-          },
+          }
           gatsbyImageData(
-            layout: CONSTRAINED,
+            layout: CONSTRAINED
             height: 550
           )
-          fields {
-            imageMeta {
-              dateTaken
-              iptc {
-                # caption
-                object_name
-              }
-              # exif {
-              #   FNumber
-              #   ExposureTime
-              #   ShutterSpeedValue
-              #   ISO
-              # }
+        }
+        fields {
+          imageMeta {
+            dateTaken
+            iptc {
+              object_name
             }
           }
         }

src/utils.js

@@ -1,6 +1,6 @@
 // import kebabCase from 'lodash/kebabCase';
 
-export const getMeta = (image) => image.childImageSharp.fields.imageMeta;
+export const getMeta = (image) => image.fields.imageMeta;
 
 export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;