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

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;