Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mklueh/gridsome-source-rest
Feed your Gridsome site with data from any REST API
https://github.com/mklueh/gridsome-source-rest
Last synced: 19 days ago
JSON representation
Feed your Gridsome site with data from any REST API
- Host: GitHub
- URL: https://github.com/mklueh/gridsome-source-rest
- Owner: mklueh
- License: mit
- Created: 2020-09-20T21:31:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-10-06T20:58:04.000Z (over 4 years ago)
- Last Synced: 2025-01-03T02:26:30.761Z (21 days ago)
- Language: JavaScript
- Size: 379 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Gridsome REST Source Plugin
[](https://www.npmjs.com/package/gridsome-source-rest)
Pull data from any **REST API** as a source for your [Gridsome](https://gridsome.org/) site.
The demo below is very simple and shows how to pull data from GitHub Gist or from a dummy REST server.
It is however possible to pull data from literally anywhere with it, for example: **Twitter, eBay, Amazon, Facebook, Instagram** and so on.
### [Demo](https://mklueh.github.io/gridsome-source-rest/)
If you need frequent data updates check if your REST provider supports webhooks that can
trigger your site build or schedule your builds frequently.
## Install
- `yarn add gridsome-source-rest`
- `npm install gridsome-source-rest --save`
## Getting Started
```js
module.exports = {
plugins: [
{
use: "gridsome-source-rest",
options: {
debug: false,
axiosConfig: undefined,
endpoint: "http://your-api/posts",
typeName: "BlogPost",
isStatic: false,
isCollection: true,
responseInterceptor: undefined
}
}
]
};
```
In your **templates** use something like this
```
query {
allBlogPost {
edges {
node {
id
title
author
}
}
}
}
```
## Options
#### debug
- Type: `boolean`
Enables log messages
#### typeName
- Type: `string` _required_
The collection where our REST API data is stored. Depending on **isStatic / isCollection**
this will either be a **standalone collection** or used as a **name property** in **metadata**
#### endpoint
- Type: `string` _required_
REST API endpoint that will be used to fetch data
#### axiosConfig
- Type: `object`
Axios config that can be passed and used for example to handle authentication of
a private REST API
#### isCollection
- Type: `[boolean]`
- Default: true
Stores fetched data in a new collection created with **typeName**
#### isStatic
- Type: `[boolean]`
- Default: false
Stores fetched data in the global metadata object. In case your data model is an
**array**, it will be stored with **typeName** as property
#### responseInterceptor
- Type: `[function]`
Interceptor function that receives the API response and let´s you modify it on the fly
before data is getting added to the Gridsome collection
Based on [axios](https://github.com/axios/axios) and allows setting axios configurations, which allows you to even use authenticated APIs.