Skip to content
Use SilverStripe CMS as a data source for GatsbyJS
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
browser Updates for elemental support Oct 24, 2019
scripts
src
.babelrc
.gitignore
.npmignore
LICENSE Initial commit Aug 29, 2019
README.md
gatsby-node.js Updates for elemental support Oct 24, 2019
index.js Massive architectural changes Oct 15, 2019
package-lock.json
package.json
plugin-options.js
yarn-error.log

README.md

gatsby-source-silverstripe

Source plugin for pulling pages, files, and arbitary dataobjects into Gatsby from SilverStripe. Borrows and implements many key design paradigms of SilverStripe for a familiar development experience.

Requirements

  • A headless installation of SilverStripe that has the SilverStripe Gatsby module installed.
  • Patience
  • Willingness to contribute.

Install

npm install --save gatsby-source-silverstripe

Recommended:

npm install --save silverstripe-gatsby-helpers

Configuration

    {
      resolve: 'gatsby-source-silverstripe',
      options: {
        host: 'http://my-headless-cms.local',
      },
    }

Usage

The cornerstone function of this module is the buildSiteTree function, which creates pages for all provided dataobjects that have a link property. It uses the same ancestry-driven template selection that SilverStripe offers.

gatsby-node.js

const { buildSiteTree } = require('gatsby-source-silverstripe');

exports.createPages = async ({ graphql, actions }) => {
  buildSiteTree({graphql, actions});
  
  return Promise.resolve();
};

The source plugin will autodiscover your page templates and match them to the content type based on its class name and inheritance. For instance:

src/
  templates/
    Page.js <-- your "container" template, providing the chrome
    Layout/
      Page.js
      HomePage.js
      GalleryPage.js
      ContactPage.js
      Blog.js
      BlogPost.js

All of these will match their respective (non fully qualified) class names on each dataobject. If a template doesn't exist, it will look up the inheritance chain. For instance, class NewsPage extends Page will be matched to the Layout/Page.js template, since Layout/NewsPage.js does not exist.

Container templates (in templates/) are not auto-discovered. You need to import them explicitly into your layouts. templates/Page.js in this example is only named that way for consistency with traditional SilverStripe projects.

src/templates/Layout/HomePage.js

import Page from '../Page';

(props) => (
	<Page>
		<h1>This is the home page</h1>
	</Page>
);

Customising the template choice

You can pass in your own function for template selection.

const { createTemplateChooser } = require('gatsby-source-silverstripe');
const chooseDefault = createTemplateChooser();
const myTemplateChooser = (node) => {
	if (node.className === 'MySpecialClass') {
		return 'special/path/template.js';
	}
	// fallback on autodiscovery
	return chooseDefault(node);
};

exports.createPages = async ({ graphql, actions }) => {
  buildSiteTree({
	  graphql,
	  actions,
	  chooseTemplate: myTemplateChooser
  });
  
  return Promise.resolve();
};

Querying data

Data is typed monolithically, under silverStripeDataObject. Fields that are unique to a subclass are assigned to nested fields for their respective names.

query {
	allSilverStripeDataObject {
		# core dataobject fields
		id
		uuid
		link
		created
		lastEdited
		ancestry
		SilverStripeSiteTree {
			title
			showInMenus
			Children {
				link
				# Relationships have to use the same nesting.
				SilverStripeSiteTree {
					title
				}
			}
		}
		ContactUsPage {
			emailTo
		}
	}
}

Fragment generation

This plugin will drop a __fragments.js artefact in your project's src/ directory. This is an auto-generated collection of fragments that will help you write your queries. The above query can be expressed more simply:

query {
	allSilverStripeDataObject {
		# core dataobject fields
		...CoreFields
		SilverStripeSiteTree {
			...SilverStripeSiteTreeFields
			Children {
				...CoreFields				
				SilverStripeSiteTree {
					...SilverStripeSiteTreeFields
				}
			}
		}
		ContactUsPage {
			...ContactUsPageFields
		}
	}
}

Next

  • Get it working with the Gatsby preview API
  • Option to download assets
  • Token based auth for viewing draft content
You can’t perform that action at this time.