Gatsby plugin for Enonic XP
This little plugin helps you generate static Gatsby pages based on data fetched via Headless API from Enonic XP.
By using GraphQL queries in plugin configuration you can specify data fields which you will output on the site pages.
Pre-requisites
This plugin can only be used in a GatsbyJS site or application. It also requires an endpoint to GraphQL API, either preconfigured or provided by Enonic Headless starter.
Usage
To install:
npm install --save gatsby-plugin-enonic
Then add the config to your gatsby-config.js:
module.exports = {
/* ... */
plugins: [
/* ... */
{
resolve: "gatsby-plugin-enonic",
options: {
api: "http://localhost:8080/site/hmdb/draft/hmdb/_graphql",
refetchInterval: 30,
pages: [{
query: require.resolve('./src/queries/getMovies'),
list: {
url: "/movies",
template: require.resolve("./src/templates/movies.js"),
title: 'Movies'
},
details: {
url: '/movie', // Remove to use list.url
template: require.resolve("./src/templates/movie.js"),
key: 'name',
title: '.displayName'
}
}]
}
}
]
}options
api
GraphQL API endpoint delivering headless content.
refetchInterval
(optional)
How often data is re-fetched from the server (in seconds).
pages.query
Relative path to a Javascript file which exports (via module.exports) a GraphQL query to retrieve nodes to be listed on the pages.list.path page. Must be resolved with require.resolve().
pages.list.url
Expected URL for the generated listing page, for example if you use movies the page will be available under mysite.com/movies. Will also be used for detail pages if pages.details.url is not provided.
pages.list.template
Relative path to React template of the listing page. Must be resolved with require.resolve().
pages.list.title
(optional)
Page title for the listing page.
pages.details.url
(optional)
Expected URL for the generated details page, for example if you use movie the page will be available under mysite.com/movie/{key}. If omitted, value from pages.list.url will be used.
pages.details.key
(optional)
Field in the query whose value will be appended to pages.details.url. If omitted, id field will be used.
pages.details.template
Relative path to React template of the detail page. Must be resolved with require.resolve().
pages.details.title
(optional)
Page title for the detail page.
Example
For a working example of gatsby-plugin-enonic, see
Gatsby plugin guide.
Thanks
This plugin uses
gatsby-source-graphql
to make GraphQL schema from Headless API available to Gatsby.