A gatsby source plugin for pulling in third party api data.
- Pulls data from configured api url
- Uses custom name to allow for multiple instances of plugin
- Option to download the json data to a configurable path
- Option to only download the json data, and skip inserting it into GraphQL
- Supports simple authentication through axios
npm install --save gatsby-source-apiserver
Migrate for Gatsby-v2 release:
Please checkout version 2.0.0 or next
npm install --save gatsby-source-apiserver@next
2.1.6:- Support pagination for recurring fetch big amount of data from server. See
calculateNextPagein example configuration
- Support pagination for recurring fetch big amount of data from server. See
2.1.5:- Allow caching for slow API servers. See example configuration
// enable disk caching allowCache: false, // if allowCache is true, then the cache will be purged after the // specified amount of time maxCacheDurationSeconds: 60 * 60 * 24,2.1.3:- Add ability to refresh node in development by
ENABLE_GATSBY_REFRESH_ENDPOINTenv. See more
- Add ability to refresh node in development by
2.1.2:- Upgrade axios to 0.19.0 to fix DoS vulnerability
- Fix BoundActionCreators depracation warning
2.1.1:- Support multiple entities for multiple api servers, pls take a look at attribute
entitiesArray - Add request params
- Support Auth0
- Support multiple entities for multiple api servers, pls take a look at attribute
2.0.0: Support gatsby-v2
// Place configuration options in your gatsby-config.js
plugins: [
{
resolve: "gatsby-source-apiserver",
options: {
// Type prefix of entities from server
typePrefix: "internal__",
// The url, this should be the endpoint you are attempting to pull data from
url: `http://yourapi.com/api/v1/posts`,
method: "post",
headers: {
"Content-Type": "application/json"
},
// Request body
data: {},
// Name of the data to be downloaded. Will show in graphQL or be saved to a file
// using this name. i.e. posts.json
name: `posts`,
// Nested level of entities in response object, example: `data.posts`
entityLevel: `data.posts`,
// Define schemaType to normalize blank values
// example:
// const postType = {
// id: 1,
// name: 'String',
// published: true,
// object: {a: 1, b: '2', c: false},
// array: [{a: 1, b: '2', c: false}]
// }
schemaType: postType,
// Request parameters
// Only available from version 2.1.0
params: {
per_page: 1
},
// Simple authentication, optional
auth: {
username: "myusername",
password: "supersecretpassword1234"
},
// enable disk caching
allowCache: false,
// if allowCache is true, then the cache will be purged after the
// specified amount of time
maxCacheDurationSeconds: 60 * 60 * 24,
// Advanced authentication for Auth0
// Only available from version 2.1.0
auth0Config: {
method: "POST",
url: "https://MyAuth0Domain/oauth/token",
headers: { "content-type": "application/json" },
data: {
grant_type: "password",
username: "myusername",
password: "PassAWordHere",
audience: "Auth0APIAudience",
scope: "openid",
client_id: "AUTH0_CLIENT_ID",
client_secret: "AUTH0_SECRET"
},
json: true
},
// Optional payload key name if your api returns your payload in a different key
// Default will use the full response from the http request of the url
payloadKey: `body`,
// Optionally save the JSON data to a file locally
// Default is false
localSave: false,
// Required folder path where the data should be saved if using localSave option
// This folder must already exist
path: `${__dirname}/src/data/auth/`,
// Optionally include some output when building
// Default is false
verboseOutput: true, // For debugging purposes
// Optionally skip creating nodes in graphQL. Use this if you only want
// The data to be saved locally
// Default is false
skipCreateNode: false, // skip import to graphQL, only use if localSave is all you want
// Optionally re-source data when it changes and
// `gatsby develop` is running.
// Requires `ENABLE_GATSBY_REFRESH_ENDPOINT=true`.
// See https://www.gatsbyjs.org/docs/environment-variables/#reserved-environment-variables
// Default is false
enableDevRefresh: true,
// Optionally override key used to re-source data
// when `gatsby develop` is running.
// Requires `enableDevRefresh: true`.
// See setting directly above this one.
// See also https://github.com/gatsbyjs/gatsby/issues/14653
// Default is `id`
refreshId: `id`,
// Pass an array containing any number of the entity configuration properties (except verbose, auth0Config),
// any not specified are defaulted to the general properties that are specified
// Only available from version 2.1.0
entitiesArray: [
{
url: `http://yourapi.com/api/v1/posts`,
method: "post",
headers: {
"Content-Type": "application/json"
},
name: `posts`,
// optional paging
calculateNextPage: (curUrl, response, context) => {
let page = 2
if (context.page) {
page = context.page + 1
}
context.page = page
const url = `http://yourapi.com/api/v1/posts?page=${page}`
const hasNext = response.data.length >= 100
return { url, hasNext }
}
}
]
}
}
];Data will be available at the following points in GraphQL.
all<TypePrefix><Name> or <TypePrefix><Name> where TypePrefix and Name is replaced by the name entered in the
configuration options.
This plugin will automatically add a dummy node to initialize Gatsby Graphql Schema, in order to avoid GraphQL errors when some fields are missing.
The dummy node will have id: 'dummy' and you will probably want to exclude it from createPage():
<ul>
{data.allPosts.edges
.filter(({ node }) => node.id !== "dummy")
.map(({ node }, index) => (
<li key={index}>{node.name}</li>
))}
</ul>or filter it out from your GraphQL query:
query {
internalAllPosts(filter: {id: {ne: "dummy"}}) {
// ...
}
}Note: make sure you pass option schemaType to make dummy node works.
Some of the returned keys may be transformed if they conflict with restricted keys used for
GraphQL such as the following ['id', 'children', 'parent', 'fields', 'internal']
These conflicting keys will now show up as alternative_id
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent