From 94e0c7e9efe9b32576e9cf17dce95ddd3936e917 Mon Sep 17 00:00:00 2001
From: Matt Kane <m@mk.gg>
Date: Tue, 31 May 2022 12:13:51 +0100
Subject: [PATCH 1/2] feat: cache image metadata

---
 .../gatsby-plugin-sharp/src/image-data.ts     | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts
index 62b8f16eaf36d..6a449a61c5145 100644
--- a/packages/gatsby-plugin-sharp/src/image-data.ts
+++ b/packages/gatsby-plugin-sharp/src/image-data.ts
@@ -36,14 +36,25 @@ const metadataCache = new Map<string, IImageMetadata>()
 
 export async function getImageMetadata(
   file: FileNode,
-  getDominantColor?: boolean
+  getDominantColor?: boolean,
+  cache?: GatsbyCache
 ): Promise<IImageMetadata> {
   if (!getDominantColor) {
     // If we don't need the dominant color we can use the cheaper size function
     const { width, height, type } = await getImageSizeAsync(file)
     return { width, height, format: type }
   }
-  let metadata = metadataCache.get(file.internal.contentDigest)
+
+  let metadata: IImageMetadata | undefined
+  const METADATA_KEY = `metadata-${file.internal.contentDigest}`
+
+  if (cache) {
+    // Use plugin cache
+    metadata = await cache.get(METADATA_KEY)
+  } else {
+    // Use in-memory cache instead
+    metadata = metadataCache.get(METADATA_KEY)
+  }
   if (metadata && process.env.NODE_ENV !== `test`) {
     return metadata
   }
@@ -62,7 +73,11 @@ export async function getImageMetadata(
       : `#000000`
 
     metadata = { width, height, density, format, dominantColor }
-    metadataCache.set(file.internal.contentDigest, metadata)
+    if (cache) {
+      await cache.set(METADATA_KEY, metadata)
+    } else {
+      metadataCache.set(METADATA_KEY, metadata)
+    }
   } catch (err) {
     reportError(`Failed to process image ${file.absolutePath}`, err)
     return {}
@@ -131,7 +146,11 @@ export async function generateImageData({
     )
   }
 
-  const metadata = await getImageMetadata(file, placeholder === `dominantColor`)
+  const metadata = await getImageMetadata(
+    file,
+    placeholder === `dominantColor`,
+    cache
+  )
 
   if ((args.width || args.height) && layout === `fullWidth`) {
     reporter.warn(
@@ -259,7 +278,11 @@ export async function generateImageData({
   if (!images?.length) {
     return undefined
   }
-  const imageProps: IGatsbyImageData = {
+  const imageProps: Pick<
+    IGatsbyImageData,
+    "backgroundColor" | "layout" | "placeholder" | "images"
+  > &
+    Partial<Pick<IGatsbyImageData, "width" | "height">> = {
     layout,
     placeholder: undefined,
     backgroundColor,
@@ -380,5 +403,5 @@ export async function generateImageData({
       imageProps.width = args.width || primaryImage.width || 1
       imageProps.height = (imageProps.width || 1) / primaryImage.aspectRatio
   }
-  return imageProps
+  return imageProps as IGatsbyImageData
 }

From f0d03861bb352bf49da14d5f038bc1c6d497fc91 Mon Sep 17 00:00:00 2001
From: Matt Kane <m@mk.gg>
Date: Wed, 1 Jun 2022 10:06:36 +0100
Subject: [PATCH 2/2] chore: unrelated cypress test fix

---
 .../cypress/integration/hot-reloading/new-file.js             | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/e2e-tests/development-runtime/cypress/integration/hot-reloading/new-file.js b/e2e-tests/development-runtime/cypress/integration/hot-reloading/new-file.js
index 8fe90f15891cf..b8da5f6596596 100644
--- a/e2e-tests/development-runtime/cypress/integration/hot-reloading/new-file.js
+++ b/e2e-tests/development-runtime/cypress/integration/hot-reloading/new-file.js
@@ -6,7 +6,9 @@ describe(`client-side navigation to the new page`, () => {
   })
 
   it(`can navigate to newly created page using link`, () => {
-    cy.findByTestId(`hot-reloading-new-file`).click().waitForRouteChange()
+    cy.findByTestId(`hot-reloading-new-file`)
+      .click({ force: true })
+      .waitForRouteChange()
     cy.getTestElement(`message`).invoke(`text`).should(`contain`, `Hello`)
   })
 })