Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Build Status Gitter chat


Source plugin for pulling data into Gatsby from Plone sites using plone.restapi.

Full documentation.


npm install --save gatsby-source-plone

How to use

// In your gatsby-config.js
plugins: [
    resolve: `gatsby-source-plone`,

How to query

You can query nodes created from Plone like the following:

  allPloneDocument {
    edges {
      node {
        text {


  allPloneNewsItem {
    edges {
      node {


Code Checkout

Checkout sources from github:

git clone git@github.com:collective/gatsby-source-plone.git

Set up Node

Make sure you use the latest NodeJS LTS version (currently 8.11.1). We recommend to use nvm for local development.

Set up Docker

We use Docker for handling the backend plone.restapi, and so it’s required to have docker-compose installed.


Build project frontend:

make purge  # if you already put some data into plone site
make init-backend  # Feeding automatic data into the plone site
make build # this command build the frontend for this plugin

you will see a site running at localhost:8000 similar to https://collective.github.io/gatsby-source-plone/

Dev Environment

Watch changes in Gatsby development mode:

make watch

Build Gatsby:

make build

Serve Gatsby build:

make serve

Stop Plone API server (started by any of the above):

make stop-backend

Clean everything and reset the environment:

make purge


Run unit tests:

make test

Watch unit tests:

make watch-test

Run both unit tests and acceptance tests:

make test-all

This command will automatically fire up the Plone backend, build and start Gatsby and the execute the selenium-based acceptance tests.

Acceptance tests depend on currently available Plone backend content. Ensure that your Plone backend includes also the tested content with:

make import-fixture

or replace Plone backend content with the test data with:

make init-backend

Publish Markdown docs at ./docs into Plone backend with:

make publish-to-backend

and export Plone backend data into importable fixture (for CI) with:

make export-fixture

Prettier Configuration

This project uses Prettier for code formatting, the .prettierrc file contains the requisite custom settings the project

It’s recommended that you setup Format on Save so that your editor takes care of this automatically for you. In Visual Studio Code this can be setup in project by adding the following to your Workspace settings (or in .vscode/settings.json), while having the VSCode plugin for Prettier installed:

  "editor.formatOnSave": true
© 2023 Gatsby, Inc.