refactor: replace cache-image with getRemoteFile from gatsby-core-utils

gatsbyjs · May 12, 2021 · e4eda3d · e4eda3d
1 parent ab919ea
commit e4eda3d
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 108 deletions.
diff --git a/packages/gatsby-source-contentful/src/cache-image.js b/packages/gatsby-source-contentful/src/cache-image.js
diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js
@@ -14,10 +14,11 @@ const {
   GraphQLJSON,
   GraphQLList,
 } = require(`gatsby/graphql`)
-const qs = require(`qs`)
+const { fetchRemoteFile } = require(`gatsby-core-utils`)
+
 const { stripIndent } = require(`common-tags`)
+const qs = require(`qs`)
 
-const cacheImage = require(`./cache-image`)
 const downloadWithRetry = require(`./download-with-retry`).default
 const {
   ImageFormatType,
@@ -662,7 +663,7 @@ const fluidNodeType = ({ name, getTracedSVG }) => {
   }
 }
 
-exports.extendNodeType = ({ type, store }) => {
+exports.extendNodeType = ({ type, cache }) => {
   if (type.name !== `ContentfulAsset`) {
     return {}
   }
@@ -672,15 +673,21 @@ exports.extendNodeType = ({ type, store }) => {
 
     const { image, options } = args
     const {
-      file: { contentType },
+      file: { contentType, url: imgUrl, fileName: name },
     } = image
 
     if (contentType.indexOf(`image/`) !== 0) {
       return null
     }
 
-    const absolutePath = await cacheImage(store, image, options)
-    const extension = path.extname(absolutePath)
+    const url = createUrl(imgUrl, options)
+    const extension = path.extname(imgUrl)
+    const absolutePath = await fetchRemoteFile({
+      url,
+      name,
+      cache,
+      ext: extension,
+    })
 
     return traceSVG({
       file: {
@@ -696,7 +703,23 @@ exports.extendNodeType = ({ type, store }) => {
 
   const getDominantColor = async ({ image, options }) => {
     try {
-      const absolutePath = await cacheImage(store, image, options)
+      const {
+        file: { contentType, url: imgUrl, fileName: name },
+      } = image
+
+      if (contentType.indexOf(`image/`) !== 0) {
+        return null
+      }
+
+      const url = createUrl(imgUrl, options)
+      const extension = path.extname(imgUrl)
+
+      const absolutePath = await fetchRemoteFile({
+        url,
+        name,
+        cache,
+        ext: extension,
+      })
 
       const pluginSharp = require(`gatsby-plugin-sharp`)
       if (!(`getDominantColor` in pluginSharp)) {
@@ -796,7 +819,7 @@ exports.extendNodeType = ({ type, store }) => {
         type: ImageLayoutType,
         description: stripIndent`
             The layout for the image.
-            CONSTRAINED: Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size. 
+            CONSTRAINED: Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size.
             FIXED: A static image size, that does not resize according to the screen width
             FULL_WIDTH: The image resizes to fit its container, even if that is larger than the source image.
             Pass a value to "sizes" if the container is not the full width of the screen.

diff --git a/packages/gatsby-transformer-sqip/src/extend-node-type.js b/packages/gatsby-transformer-sqip/src/extend-node-type.js
@@ -1,22 +1,23 @@
-const { resolve } = require(`path`)
-const md5File = require(`md5-file`)
-
-const {
-  DuotoneGradientType,
-  ImageCropFocusType,
-} = require(`gatsby-transformer-sharp/types`)
-const { queueImageResizing } = require(`gatsby-plugin-sharp`)
+const path = require(`path`)
 
 const Debug = require(`debug`)
 const fs = require(`fs-extra`)
+const sharp = require(`sharp`)
+const md5File = require(`md5-file`)
+
 const {
   GraphQLObjectType,
   GraphQLString,
   GraphQLInt,
   GraphQLBoolean,
 } = require(`gatsby/graphql`)
-const sharp = require(`sharp`)
-const { ensureDir } = require(`fs-extra`)
+const { queueImageResizing } = require(`gatsby-plugin-sharp`)
+const { fetchRemoteFile } = require(`gatsby-core-utils`)
+const { createUrl } = require(`gatsby-source-contentful/extend-node-type`)
+const {
+  DuotoneGradientType,
+  ImageCropFocusType,
+} = require(`gatsby-transformer-sharp/types`)
 
 const generateSqip = require(`./generate-sqip`)
 
@@ -44,11 +45,11 @@ module.exports = async args => {
 
 async function sqipSharp({ type, cache, getNodeAndSavePathDependency, store }) {
   const program = store.getState().program
-  const cacheDir = resolve(
+  const cacheDir = path.resolve(
     `${program.directory}/node_modules/.cache/gatsby-transformer-sqip/`
   )
 
-  await ensureDir(cacheDir)
+  await fs.ensureDir(cacheDir)
 
   return {
     sqip: {
@@ -140,14 +141,12 @@ async function sqipContentful({ type, cache, store }) {
     schemes: { ImageResizingBehavior, ImageCropFocusType },
   } = require(`gatsby-source-contentful`)
 
-  const cacheImage = require(`gatsby-source-contentful/cache-image`)
-
   const program = store.getState().program
-  const cacheDir = resolve(
+  const cacheDir = path.resolve(
     `${program.directory}/node_modules/.cache/gatsby-transformer-sqip/`
   )
 
-  await ensureDir(cacheDir)
+  await fs.ensureDir(cacheDir)
 
   return {
     sqip: {
@@ -192,7 +191,7 @@ async function sqipContentful({ type, cache, store }) {
       },
       async resolve(asset, fieldArgs, context) {
         const {
-          file: { contentType },
+          file: { contentType, url: imgUrl },
         } = asset
 
         if (!contentType.includes(`image/`)) {
@@ -223,7 +222,13 @@ async function sqipContentful({ type, cache, store }) {
           background,
         }
 
-        const absolutePath = await cacheImage(store, asset, options)
+        const url = createUrl(imgUrl, options)
+        const extension = path.extname(imgUrl)
+        const absolutePath = await fetchRemoteFile({
+          url,
+          cache,
+          ext: extension,
+        })
 
         const contentDigest = await md5File(absolutePath)