Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/audunru/gatsby-source-remote-file
Fetch a remote file and use it as a node in Gatsby
https://github.com/audunru/gatsby-source-remote-file
gatsby gatsby-plugin gatsby-source-plugin gatsbyjs
Last synced: about 1 month ago
JSON representation
Fetch a remote file and use it as a node in Gatsby
- Host: GitHub
- URL: https://github.com/audunru/gatsby-source-remote-file
- Owner: audunru
- License: mit
- Archived: true
- Created: 2020-02-16T17:17:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-08T19:16:57.000Z (4 months ago)
- Last Synced: 2024-09-26T00:28:32.589Z (about 1 month ago)
- Topics: gatsby, gatsby-plugin, gatsby-source-plugin, gatsbyjs
- Language: TypeScript
- Size: 1.32 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-source-remote-file
## Description
_gatsby-source-remote-file_ is a simple wrapper around `createRemoteFileNode()` from [gatsby-source-filesystem](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/)
Use it to add any URL as a file node in Gatsby, then optionally use a transformer plugin to turn the contents of the URL into other node(s).
## How to install
```sh
npm install gatsby-source-remote-file --save
```
or
```sh
yarn add gatsby-source-remote-file
```
Add the plugin to your _gatsby-config.js_:
```js
module.exports = {
plugins: [
// ... you likely have other plugins here
{
resolve: "gatsby-source-remote-file",
options: {
url: "https://jsonplaceholder.typicode.com/todos",
name: "todos",
},
},
// ... you likely have other plugins here as well
],
};
```
## Available options
```js
module.exports = {
plugins: [
{
resolve: "gatsby-source-remote-file",
options: {
// The source url of the remote file
url: "https://jsonplaceholder.typicode.com/todos",
// OPTIONAL
// Provide a name for the created node (default: "remote")
name: "todos",
// OPTIONAL
// The id of the parent node (i.e. the node to which the new remote File node will be linked to.
parentNodeId: "yadi-yadi-yadi",
// OPTIONAL
// Adds htaccess authentication to the download request if passed in.
auth: { htaccess_user: `USER`, htaccess_pass: `PASSWORD` },
// OPTIONAL
// Adds extra http headers to download request if passed in.
httpHeaders: { Authorization: `Bearer someAccessToken` },
// OPTIONAL
// Sets the file extension
ext: ".json",
// OPTIONAL
// If something goes wrong while downloading the remote file,
// report a warning instead of stopping the build. (default: "fail")
errorHandling: "warn",
},
},
],
};
```
## Examples of usage
You can transform the node created by this plugin with the `onCreateNode` API.
Continuing the _TODO_ example, add the following to _gatsby-node.js_ to create a node for each todo:
```js
exports.onCreateNode = async ({
node,
loadNodeContent,
actions: { createNode },
createNodeId,
createContentDigest,
}) => {
if (node.name !== "todos") return; // 'todos' is the name we gave the remote node in gatsby-config.js, so we only want to transform that
try {
const nodeContent = await loadNodeContent(node);
const todos = JSON.parse(nodeContent);
todos.forEach((todo) => {
const childId = createNodeId(`${node.id}${todo.id}`);
const todoNode = {
...todo,
todoId: todo.id,
sourceInstanceName: node.name,
id: childId,
children: [],
parent: node.id,
internal: {
type: "Todo",
contentDigest: createContentDigest(todo),
description: "A todo to do for you, toodeloo",
},
};
createNode(todoNode);
});
} catch (error) {
console.error(error);
}
};
```
## How to run tests
```sh
npm run test
```
## How to develop locally
Clone the repository and link it so that you can use it locally and test it in a Gatsby project:
```sh
git clone https://github.com/audunru/gatsby-source-remote-file.git
cd gatsby-source-remote-file
npm i
npm link
```
Create a new Gatsby project and link the local version of the plugin while you develop:
```sh
gatsby new gatsby-source-remote-file-test
cd gatsby-source-remote-file-test
npm link "gatsby-source-remote-file"
npm i gatsby-source-remote-file
```
You can now make changes in _gatsby-source-remote-file_, run `npm run develop` in the plugin directory and run `npm run develop` in your gatsby directory to test your changes.