fix(gatsby-remark-images-contentful): avoid modifying options when passed by reference (#17880)

Author: jdcataldo

packages/gatsby-remark-images-contentful/src/index.js

@@ -61,10 +61,10 @@ module.exports = async (
     const optionsHash = createContentDigest(options)
 
     const cacheKey = `remark-images-ctf-${fileName}-${optionsHash}`
-    let cahedRawHTML = await cache.get(cacheKey)
+    let cachedRawHTML = await cache.get(cacheKey)
 
-    if (cahedRawHTML) {
-      return cahedRawHTML
+    if (cachedRawHTML) {
+      return cachedRawHTML
     }
     const metaReader = sharp()
 

packages/gatsby-remark-images-contentful/src/utils/index.js

@@ -16,21 +16,17 @@ const getBase64Img = async url => {
 
 const buildResponsiveSizes = async ({ metadata, imageUrl, options = {} }) => {
   const { width, height, density } = metadata
+  const { sizeByPixelDensity, maxWidth, sizes } = options
   const aspectRatio = width / height
   const pixelRatio =
-    options.sizeByPixelDensity && typeof density === `number` && density > 0
+    sizeByPixelDensity && typeof density === `number` && density > 0
       ? density / 72
       : 1
 
-  const presentationWidth = Math.min(
-    options.maxWidth,
-    Math.round(width / pixelRatio)
-  )
+  const presentationWidth = Math.min(maxWidth, Math.round(width / pixelRatio))
   const presentationHeight = Math.round(presentationWidth * (height / width))
-
-  if (!options.sizes) {
-    options.sizes = `(max-width: ${presentationWidth}px) 100vw, ${presentationWidth}px`
-  }
+  const sizesQuery =
+    sizes || `(max-width: ${presentationWidth}px) 100vw, ${presentationWidth}px`
 
   const images = []
 
@@ -64,7 +60,7 @@ const buildResponsiveSizes = async ({ metadata, imageUrl, options = {} }) => {
     srcSet,
     webpSrcSet,
     src: imageUrl,
-    sizes: options.sizes,
+    sizes: sizesQuery,
     density,
     presentationWidth,
     presentationHeight,