gatsby-source-plone

With the previous sections on source nodes, retrieving data from plone.restapi, and finally using the search traversal method, we have understood how our source-plugin works at base level.

Great work!

gatsby-source-plone is basically this plugin with additional helpful features and functionality to handle all kinds of data, caching and so on in an optimal manner.

First remove whatever code we have written in gatsby-node.js, as our plugin will be taking care of all that internally. Then install gatsby-source-plone with npm install gatsby-source-plone.

Before we can use the plugin, we need to configure it to be used with GatsbyJS.

Configuration

All of the settings for the gatsby-source-plone plugin is in the gatsby-node.js:

{
  resolve: 'gatsby-source-plone',
  options: {
    baseUrl: 'https://demo.plone.org'
  },
},

baseUrl is the Plone site from which data is to be sourced from. It can be a Plone site root or a Plone folder to be used as root.

searchParams although not used in the example, it is worth noting. It is used to limit retrieved content objects by a search parameter. This allows users to use and display only filtered content in the generated static site. For examples and more detailed explanation refer to the docs.

token is the JWT (JSON Web Token) for plone.restapi. This is used in some Plone sites that require authentication to query data. For configuring authentication with JWT and dotenv, read the full documentation for a step by step reference.

Note

https://demo.plone.org which was earlier used in the examples requires authentication to query for data.

Warning

This tutorial previously used https://plonedemo.kitconcept.com/en in its examples because it did not require authorization. The Plone Foundation now actively maintains a Plone 6 demo. Browsing its API requires a basic authorization token. We have updated all references to use the Plone 6 demo. All that means the examples might not work.

Todo

Update this training to use a site that does not require a basic authorization token.

Once configured with basic settings, all the data of the Plone Site specified will be available for query via GraphQL.

To test the plugin you could use the sample configuration mentioned above.

Exercise

Run the development server with gatsby develop and navigate to GraphQL explorer at http://localhost:8000/___graphql.

Explore different content object types and also take a look at the breadcrumbs data.

Hints: Query all objects of a type with allPloneEvent, allPloneNewsItem and so on. Breadcrumbs data for every content node is available to us with allPloneBreadcrumbs.

Solution

{
  allPloneNewsItem {
    edges {
      node {
        id
      }
    }
  }

  allPloneEvent {
    edges {
      node {
        id
      }
    }
  }

  allPloneBreadcrumbs {
    edges {
      node {
        id
      }
    }
  }
}