feat(gatsby-source-filesystem): add optional name parameter to create…

…RemoteFileNode (#11054)

Fix: #11037

<!--
  Have any questions? Check out the contributing docs at https://gatsby.app/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

Take an optional name parameter to fix issue with temporary urls having no "guessable" name
<!-- Write a brief description of the changes introduced by this PR -->

## Related Issues

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

packages/gatsby-source-filesystem/README.md

@@ -227,9 +227,9 @@ exports.downloadMediaFiles = ({
 
 The file node can then be queried using GraphQL. See an example of this in the [gatsby-source-wordpress README](/packages/gatsby-source-wordpress/#image-processing) where downloaded images are queried using [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) to use in the component [gatsby-image](/packages/gatsby-image/).
 
-#### Retrieving the remote file extension
+#### Retrieving the remote file name and extension
 
-The helper tries first to retrieve the file extension by parsing the url and the path provided (e.g. if the url is https://example.com/image.jpg, the extension will be inferred as `.jpg`). If the url does not contain an extension, we use the [`file-type`](https://www.npmjs.com/package/file-type) package to infer the file type. Finally, the extension _can_ be explicitly passed, like so:
+The helper tries first to retrieve the file name and extension by parsing the url and the path provided (e.g. if the url is https://example.com/image.jpg, the extension will be inferred as `.jpg` and the name as `image`). If the url does not contain an extension, we use the [`file-type`](https://www.npmjs.com/package/file-type) package to infer the file type. Finally, the name and the extension _can_ be explicitly passed, like so:
 
 ```javascript
 createRemoteFileNode({
@@ -241,5 +241,6 @@ createRemoteFileNode({
   createNodeId,
   // if necessary!
   ext: ".jpg",
+  name: "image",
 })
 ```

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

@@ -185,6 +185,7 @@ async function processRemoteNode({
   auth = {},
   createNodeId,
   ext,
+  name,
 }) {
   // Ensure our cache directory exists.
   const pluginCacheDir = path.join(
@@ -211,7 +212,9 @@ async function processRemoteNode({
 
   // Create the temp and permanent file names for the url.
   const digest = createHash(url)
-  const name = getRemoteFileName(url)
+  if (!name) {
+    name = getRemoteFileName(url)
+  }
   if (!ext) {
     ext = getRemoteFileExtension(url)
   }
@@ -313,6 +316,7 @@ module.exports = ({
   auth = {},
   createNodeId,
   ext = null,
+  name = null,
 }) => {
   // validation of the input
   // without this it's notoriously easy to pass in the wrong `createNodeId`
@@ -355,6 +359,7 @@ module.exports = ({
     createNodeId,
     auth,
     ext,
+    name,
   })
 
   fileDownloadPromise.then(() => bar.tick())