GSOC 2019: GatsbyJS preview for Plone

Development
8

The second coding period of GSOC 2019 has now been completed, so it is time for a quick update:

As @iFlameing had planned, this period was used for testing the MVP developed in the first period and fixing bugs when found, and also adding more unit tests for the code developed in the last year. This period was successful, so the last period can be used for refactoring the code for easier maintenance.

We also managed to build an acceptance testing setup for testing GatsbyJS develop live updates using my ZServer+WebSockets docker image "datakurre/gatsby-source-plone:2019-06-21".

Meanwhile I realized that the current Plone GatsbyJS examples are way too complex, because they are examples for re-building complete Plone-sites with GatsbyJS. Therefore I wrote an example of building a simple page composition from contents of a Plone folder – similarly to countless page composition add-ons in Plone:

This example contains only single page

That fetches its content from Plone, using a two level deep GraphQL query for the configured gatsby-source-plone site root:

export const query = graphql`
  fragment Document on PloneDocument {
    _type
    title
    description
    text {
      react
    }
  }
  fragment Image on PloneImage {
    _type
    title
    description
    image {
      childImageSharp {
        fixed(width: 1200) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
  query IndexPageQuery {
    ploneSite {
      nodes {
        ... on PloneFolder {
          _type
          title
          description
          nodes {
            ... on PloneDocument {
              ...Document
            }
          }
        }
        ... on PloneDocument {
          ...Document
        }
        ... on PloneImage {
          ...Image
        }
      }
    }
  }
`;

Note that support for those linked "nodes"-attributes connecting folder contents to their parents were added into gatsby-source-plone master very recently.

1 Like