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://plonedemo.kitconcept.com/en',
    logLevel: 'DEBUG',
  },
},

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.

logLevel decides what levels of logging is displayed as the plugin is run. The multiple levels include: CRITICAL, ERROR, WARNING, INFO, DEBUG in order of priority of logged messages.

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://plonedemo.kitconcept.com/en which was earlier used in the examples requires no authentication to query for data. Hence we can skip the token setting here.

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 GraphiQL 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
      }
    }
  }
}