Skip to main content
View plugin on GitHub
See starters using this

Gatsby plugin for Enonic XP

This little plugin helps you generate static Gatsby pages based on data provided by Enonic XP via Headless starter.

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 an application that is using gatsby NPM module, ideally created based on one of the Gatsby starters. It also requires an endpoint to GraphQL API 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: {
        url: "http://localhost:8080/site/default/draft/hmdb/api",
        refetchInterval: 10,
        pages: [{
          list: {
            path: "/movies",
            template: require.resolve("./src/templates/movies.js")
          },
          details: {
            path: '/movie', // Remove to use list.path
            template: require.resolve("./src/templates/movie.js"),
            key: 'name'
          },
          query: `
            getChildren(key: "\${site}/movies", first: 100) {
              name: _name
              id: _id
              displayName
              ... on com_enonic_headless_Movie {
                data {
                  subtitle
                  release
                  abstract
                  trailer
                  photos {
                    ... on media_Image {
                      url_w800: imageUrl(type: absolute, scale: "width(800)")
                      attachments {
                        name
                      }
                    }  
                  }
                }
              }
            }
          `
        }]
      }
    }
  ]
}
  • url - GraphQL API endpoint of the Headless starter
  • refetchInterval - how often data is reloaded (in seconds)
  • pages.query - GraphQL query to retrieve nodes which will be listed on the pages.list.path page
  • pages.list.path - expected path for the generated listing page, for example if you use movies the page will be available under mysite.com/movies
  • pages.list.template - template for the listing page
  • pages.details.path - expected path 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.path will be used)
  • pages.details.key - field in the query whose value will be added to the details page url (see above)
  • pages.details.template - template for the details page

Example

For a working example of gatsby-plugin-enonic, see gatsby-plugin-enonic-example.

Thanks

This plugin uses gatsby-source-graphql to inject Enonic Headless starter’s GraphQL schema into Gatsby’s.


Docs
Tutorials
Plugins
Blog
Showcase