feat(gatsby-source-filesystem): keep original name of remote files (#9777)

Author: hbish

packages/gatsby-source-filesystem/src/__tests__/utils.js

@@ -1,20 +1,23 @@
-const { getRemoteFileExtension } = require(`../utils`)
+const { getRemoteFileExtension, getRemoteFileName } = require(`../utils`)
 
 describe(`create remote file node`, () => {
-  it(`can correctly retrieve files extensions`, () => {
+  it(`can correctly retrieve file name and extensions`, () => {
     ;[
       [
         `https://scontent.xx.fbcdn.net/v/t51.2885-15/42078503_294439751160571_1602896118583132160_n.jpg?_nc_cat=101&oh=e30490a47409051c45dc3daacf616bc0&oe=5C5EA8EB`,
+        `42078503_294439751160571_1602896118583132160_n`,
         `.jpg`,
       ],
       [
         `https://facebook.com/hello,_world_asdf12341234.jpeg?test=true&other_thing=also-true`,
+        `hello,_world_asdf12341234`,
         `.jpeg`,
       ],
-      [`https://test.com/asdf.png`, `.png`],
-      [`./path/to/relative/file.tiff`, `.tiff`],
-      [`/absolutely/this/will/work.bmp`, `.bmp`],
-    ].forEach(([url, ext]) => {
+      [`https://test.com/asdf.png`, `asdf`, `.png`],
+      [`./path/to/relative/file.tiff`, `file`, `.tiff`],
+      [`/absolutely/this/will/work.bmp`, `work`, `.bmp`],
+    ].forEach(([url, name, ext]) => {
+      expect(getRemoteFileName(url)).toBe(name)
       expect(getRemoteFileExtension(url)).toBe(ext)
     })
   })

packages/gatsby-source-filesystem/src/create-remote-file-node.js

@@ -8,7 +8,7 @@ const readChunk = require(`read-chunk`)
 const fileType = require(`file-type`)
 
 const { createFileNode } = require(`./create-file-node`)
-const { getRemoteFileExtension } = require(`./utils`)
+const { getRemoteFileExtension, getRemoteFileName } = require(`./utils`)
 const cacheId = url => `create-remote-file-node-${url}`
 
 /********************
@@ -75,7 +75,7 @@ const FS_PLUGIN_DIR = `gatsby-source-filesystem`
  * @return {String}
  */
 const createFilePath = (directory, filename, ext) =>
-  path.join(directory, CACHE_DIR, FS_PLUGIN_DIR, `${filename}${ext}`)
+  path.join(directory, `${filename}${ext}`)
 
 /********************
  * Queue Management *
@@ -178,8 +178,12 @@ async function processRemoteNode({
   ext,
 }) {
   // Ensure our cache directory exists.
-  const programDir = store.getState().program.directory
-  await fs.ensureDir(path.join(programDir, CACHE_DIR, FS_PLUGIN_DIR))
+  const pluginCacheDir = path.join(
+    store.getState().program.directory,
+    CACHE_DIR,
+    FS_PLUGIN_DIR
+  )
+  await fs.ensureDir(pluginCacheDir)
 
   // See if there's response headers for this url
   // from a previous request.
@@ -198,11 +202,12 @@ async function processRemoteNode({
 
   // Create the temp and permanent file names for the url.
   const digest = createHash(url)
+  const name = getRemoteFileName(url)
   if (!ext) {
     ext = getRemoteFileExtension(url)
   }
 
-  const tmpFilename = createFilePath(programDir, `tmp-${digest}`, ext)
+  const tmpFilename = createFilePath(pluginCacheDir, `tmp-${digest}`, ext)
 
   // Fetch the file.
   try {
@@ -218,7 +223,12 @@ async function processRemoteNode({
         ext = `.${filetype.ext}`
       }
     }
-    const filename = createFilePath(programDir, digest, ext)
+
+    const filename = createFilePath(
+      path.join(pluginCacheDir, digest),
+      name,
+      ext
+    )
     // If the status code is 200, move the piped temp file to the real name.
     if (response.statusCode === 200) {
       await fs.move(tmpFilename, filename, { overwrite: true })

packages/gatsby-source-filesystem/src/utils.js

@@ -1,6 +1,19 @@
 const path = require(`path`)
 const Url = require(`url`)
 
+/**
+ * getParsedPath
+ * --
+ * Parses remote url to a path object
+ *
+ *
+ * @param  {String}          url
+ * @return {Object}          path
+ */
+function getParsedPath(url) {
+  return path.parse(Url.parse(url).pathname)
+}
+
 /**
  * getRemoteFileExtension
  * --
@@ -11,5 +24,18 @@ const Url = require(`url`)
  * @return {String}          extension
  */
 export function getRemoteFileExtension(url) {
-  return path.parse(Url.parse(url).pathname).ext
+  return getParsedPath(url).ext
+}
+
+/**
+ * getRemoteFileName
+ * --
+ * Parses remote url to retrieve remote file name
+ *
+ *
+ * @param  {String}          url
+ * @return {String}          filename
+ */
+export function getRemoteFileName(url) {
+  return getParsedPath(url).name
 }

yarn.lock

@@ -9122,7 +9122,7 @@ graphql-type-json@^0.2.1:
   resolved "https://registry.yarnpkg.com/graphql-type-json/-/graphql-type-json-0.2.1.tgz#d2c177e2f1b17d87f81072cd05311c0754baa420"
   integrity sha1-0sF34vGxfYf4EHLNBTEcB1S6pCA=
 
-graphql@0.13.2, graphql@^0.13.0, graphql@^0.13.2:
+graphql@^0.13.0, graphql@^0.13.2:
   version "0.13.2"
   resolved "http://registry.npmjs.org/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
   integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==