gatsby-plugin-strapi-source-extender

A plugin to extend Strapi Source plugin.

• You can have Dynamic Zone usable, not a JSON object ;
• Images in Dynamic Zone can be used with gatsby-image.

Tested with:

• "gatsby-source-strapi": "^1.0.1"
• "strapi": "3.6.8"
• "gatsby": "^4.4.0"

Changelog

More informations in CHANGELOG.md

Installation

npm i gatsby-plugin-strapi-source-extender
or
yarn install gatsby-plugin-strapi-source-extender

Configuration

// ./gatsby-config.js
module.exports = {
    {
        resolve: 'gatsby-plugin-strapi-source-extender',
        options: {
        postfix: 'Ext',
        showLog: false,
        strapiTypes: [
            { type: 'StrapiPage', dynamicZones: ['contentSections'] },
            { type: 'StrapiGlobal' },
        ],
        },
    },
}

Explanations

Property	Usage
postfix	The postfix of name of the new type, default : Ext. Eg. <StrapiSouceType>Postfix
showLog	Display log messages, default : false
strapiTypes	All the Strapi types to manage.
strapiTypes.type	Name of the Strapi type to manage.
strapiTypes.dynamicZones	All the Dynamic Zones (root only) to manage.

Usage

GraphQL exemple.

contentSections is a Dynamic zone

For each elements in the Dynamic zone, you must request two properties :

• __typename to assign a behavior to the component ;
• order to keep the order of components as they are in Strapi admin.

query DynamicPageQuery($id: String!, $locale: String!) {
    ...
    strapiPage: strapiPageExt(id: { eq: $id }) {
      ...
      contentSections {
        sectionsHeroImage {
          __typename
          order
      ...

Gatsby exemple.

The Dynamic Zone content with this plugin is not a JSON, it's an Object, but not an Array. Instead of, you'll have null components repeated.

Because is an object, you can't iterate into, so add this :

// sections is an object, our Dynamic zone
// dzSanitized is an Array, our Dynamic zone sorted

const dzSanitized = []

// Remove empty datas
Object.keys(dz).forEach(key => {
  if (dz[key]) {
    Object.keys(dz[key]).forEach(microKey => {
      dz[key][microKey] ? dzSanitized.push(dz[key][microKey]) : ''
    })
  }
})

// Order array like in Strapi Admin
dzSanitized.sort(function (a, b) {
  return a.order - b.order
})

Or you can use the helper :

import { StrapiExtenderUtils } from 'gatsby-plugin-strapi-source-extender'
...
{
  StrapiExtenderUtils.objectToArray(sections).map((section, i) => {
    return (
      <Section
        sectionData={section}
        key={`${section.__typename}${(section.id, i)}`}
      />
    );
  });
}