From 1d7fe288e97ff93f5ad5fb1d7e8aa6d46875f632 Mon Sep 17 00:00:00 2001 From: ajayns Date: Fri, 2 Mar 2018 19:35:35 +0530 Subject: [PATCH 1/3] Add rough docs for createRemoteFileNode --- packages/gatsby-source-filesystem/README.md | 51 ++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-source-filesystem/README.md b/packages/gatsby-source-filesystem/README.md index 015356b3ee114..482fff27b4814 100644 --- a/packages/gatsby-source-filesystem/README.md +++ b/packages/gatsby-source-filesystem/README.md @@ -117,6 +117,55 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { ### createRemoteFileNode +When working with remote files from a source such as headless CMS, you download the files and create `File` nodes. + +```javascript +createRemoteFileNode({ + // The source url of the remote file + url: + // The redux store. + // The parameter from `downloadMediaFiles` should be passed in here + store: + // The Gatsby cache + // The parameter from `downloadMediaFiles` should be passed in here + cache: + // Method used to create a node + createNode: + // OPTIONAL + // Adds htaccess authentication if passed in. + auth: +}) +``` + +#### Example usage + +The following is what's done in [gatsby-source-wordpress](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress). Downloaded files are created as `File` nodes. + ```javascript -TO DO +const { createRemoteFileNode } = require(`gatsby-source-filesystem`); + +exports.downloadMediaFiles = ({ nodes, store, cache, createNode, _auth }) => { + nodes.map(async node => { + let fileNode + // Ensures we are only process Media Files + // `wordpress__wp_media` is the media file type name for Wordpress + if (node.__type === `wordpress__wp_media`) { + try { + fileNode = await createRemoteFileNode({ + url: node.source_url, + store, + cache, + createNode, + auth: _auth, + }) + } catch (e) { + // Ignore + } + } + + if (fileNode) { + node.localFile___NODE = fileNode.id + } + }) +}; ``` From 36bbb95be739fb98cd59da92139377df64a9a6d1 Mon Sep 17 00:00:00 2001 From: ajayns Date: Sat, 3 Mar 2018 02:09:27 +0530 Subject: [PATCH 2/3] Minor patches --- packages/gatsby-source-filesystem/README.md | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/gatsby-source-filesystem/README.md b/packages/gatsby-source-filesystem/README.md index 482fff27b4814..2664ac15fdb45 100644 --- a/packages/gatsby-source-filesystem/README.md +++ b/packages/gatsby-source-filesystem/README.md @@ -117,29 +117,30 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { ### createRemoteFileNode -When working with remote files from a source such as headless CMS, you download the files and create `File` nodes. +When working with remote files from a source such as headless CMS, you download them and create `File` nodes using `createRemoteFileNode` ```javascript createRemoteFileNode({ // The source url of the remote file url: - // The redux store. + // The redux store // The parameter from `downloadMediaFiles` should be passed in here store: - // The Gatsby cache + // The cache passed in to check if there's response headers for this url from previous request // The parameter from `downloadMediaFiles` should be passed in here cache: // Method used to create a node + // The parameter from `downloadMediaFiles` should be passed in here createNode: // OPTIONAL - // Adds htaccess authentication if passed in. + // Adds htaccess authentication if passed in auth: }) ``` #### Example usage -The following is what's done in [gatsby-source-wordpress](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress). Downloaded files are created as `File` nodes. +The following is what's done in [gatsby-source-wordpress](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress). Downloaded files are created as `File` nodes and then linked to the Media File node, so it can be queried both as a regular `File` node and from the `localFile` field in the Media File node. ```javascript const { createRemoteFileNode } = require(`gatsby-source-filesystem`); @@ -147,11 +148,11 @@ const { createRemoteFileNode } = require(`gatsby-source-filesystem`); exports.downloadMediaFiles = ({ nodes, store, cache, createNode, _auth }) => { nodes.map(async node => { let fileNode - // Ensures we are only process Media Files + // Ensures we are only processing Media Files // `wordpress__wp_media` is the media file type name for Wordpress if (node.__type === `wordpress__wp_media`) { - try { - fileNode = await createRemoteFileNode({ + try { + fileNode = await createRemoteFileNode({ url: node.source_url, store, cache, @@ -163,9 +164,11 @@ exports.downloadMediaFiles = ({ nodes, store, cache, createNode, _auth }) => { } } + // Adds a field `localFile` to the node + // ___NODE appendix tells gatsby that this field will link to another node if (fileNode) { node.localFile___NODE = fileNode.id } }) }; -``` +``` \ No newline at end of file From e63a358427f385d6eb91866f2fe19eae02050807 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Fri, 2 Mar 2018 12:52:45 -0800 Subject: [PATCH 3/3] Update README.md --- packages/gatsby-source-filesystem/README.md | 35 +++++++++++---------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/gatsby-source-filesystem/README.md b/packages/gatsby-source-filesystem/README.md index 2664ac15fdb45..7c47540e38bfa 100644 --- a/packages/gatsby-source-filesystem/README.md +++ b/packages/gatsby-source-filesystem/README.md @@ -117,30 +117,33 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { ### createRemoteFileNode -When working with remote files from a source such as headless CMS, you download them and create `File` nodes using `createRemoteFileNode` +When building source plugins for remote data sources such as headless CMSs, their data will often link to files stored remotely that are often convenient to download so you can work with locally. + +The `createRemoteFileNode` helper makes it easy to download remote files and add them to your site's GraphQL schema. ```javascript createRemoteFileNode({ // The source url of the remote file - url: - // The redux store - // The parameter from `downloadMediaFiles` should be passed in here - store: - // The cache passed in to check if there's response headers for this url from previous request - // The parameter from `downloadMediaFiles` should be passed in here - cache: - // Method used to create a node - // The parameter from `downloadMediaFiles` should be passed in here - createNode: + url: `https://example.com/a-file.jpg`, + + // The redux store which is passed to all Node APIs. + store, + + // Gatsby's cache which the helper uses to check if the file has been downloaded already. It's passed to all Node APIs. + cache, + + // The boundActionCreator used to create nodes + createNode, + // OPTIONAL - // Adds htaccess authentication if passed in - auth: + // Adds htaccess authentication to the download request if passed in. + auth: { user: `USER`, password: `PASSWORD` }, }) ``` #### Example usage -The following is what's done in [gatsby-source-wordpress](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress). Downloaded files are created as `File` nodes and then linked to the Media File node, so it can be queried both as a regular `File` node and from the `localFile` field in the Media File node. +The following example is pulled from [gatsby-source-wordpress](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress). Downloaded files are created as `File` nodes and then linked to the WordPress Media node, so it can be queried both as a regular `File` node and from the `localFile` field in the Media node. ```javascript const { createRemoteFileNode } = require(`gatsby-source-filesystem`); @@ -165,10 +168,10 @@ exports.downloadMediaFiles = ({ nodes, store, cache, createNode, _auth }) => { } // Adds a field `localFile` to the node - // ___NODE appendix tells gatsby that this field will link to another node + // ___NODE appendix tells Gatsby that this field will link to another node if (fileNode) { node.localFile___NODE = fileNode.id } }) }; -``` \ No newline at end of file +```