# gatsby-plugin-strapi-source-extender > A plugin to have dynamic zone with the Gatsby way Latest version **2.0.2** (published 2022-04-20) · ISC license · 0 weekly downloads ## Install ```sh npm install gatsby-plugin-strapi-source-extender pnpm add gatsby-plugin-strapi-source-extender yarn add gatsby-plugin-strapi-source-extender bun add gatsby-plugin-strapi-source-extender ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.2 | | Published | 2022-04-20 | | First published | 2022-01-19 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 27.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | novagaia | | Maintainers | novagaia | | Keywords | gatsby, gatsby-image, dynamic-zone, gatsby-plugin, gatsby-source-plugin, strapi | ## Links - npm: https://www.npmjs.com/package/gatsby-plugin-strapi-source-extender - Repository: https://github.com/NovaGaia/gatsby-plugin-strapi-source-extender - Homepage: https://github.com/NovaGaia/gatsby-plugin-strapi-source-extender#readme - Issues: https://github.com/NovaGaia/gatsby-plugin-strapi-source-extender/issues - npm.io page: https://npm.io/package/gatsby-plugin-strapi-source-extender ## Dependencies (3) - [humps](https://npm.io/package/humps.md) ^2.0.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.0.0 ## Alternatives - [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads - [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads - [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads - [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads - [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads ## Recent versions - 2.0.2 (latest) — 2022-04-20 - 2.0.1 — 2022-04-20 - 2.0.0 — 2022-04-15 - 1.1.8 — 2022-02-23 - 1.1.7 — 2022-01-27 - 1.1.6 — 2022-01-26 - 1.1.5 — 2022-01-23 - 1.1.4 — 2022-01-23 - 1.1.3 — 2022-01-23 - 1.1.2 — 2022-01-23 - 1.1.1 — 2022-01-23 - 1.1.0 — 2022-01-23 - 1.0.7 — 2022-01-19 - 1.0.6 — 2022-01-19 - 1.0.5 — 2022-01-19 - … 6 more at https://npm.io/package/gatsby-plugin-strapi-source-extender/versions ## README # 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"` ![License](https://img.shields.io/github/license/NovaGaia/gatsby-plugin-strapi-source-extender?style=flat-square) ![Version](https://img.shields.io/npm/v/gatsby-plugin-strapi-source-extender?style=flat-square) ![Gatsby Version](https://img.shields.io/npm/dependency-version/gatsby-plugin-strapi-source-extender/peer/gatsby?style=flat-square) ![Strapi Version](https://img.shields.io/npm/dependency-version/gatsby-plugin-strapi-source-extender/peer/strapi?style=flat-square) ![gatsby-source-strapi Version](https://img.shields.io/npm/dependency-version/gatsby-plugin-strapi-source-extender/peer/gatsby-source-strapi?style=flat-square) ![React Version](https://img.shields.io/github/package-json/dependency-version/NovaGaia/gatsby-plugin-strapi-source-extender/peer/react?style=flat-square) ### Changelog **More informations in [`CHANGELOG.md`](https://github.com/NovaGaia/gatsby-plugin-strapi-source-extender/blob/main/CHANGELOG.md)** ## Installation ```bash npm i gatsby-plugin-strapi-source-extender or yarn install gatsby-plugin-strapi-source-extender ``` ## Configuration ```javascript // ./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. `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. ```graphql 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 : ```javascript // 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 : ```javascript import { StrapiExtenderUtils } from 'gatsby-plugin-strapi-source-extender' ... { StrapiExtenderUtils.objectToArray(sections).map((section, i) => { return (
); }); } ``` --- _Source: https://npm.io/package/gatsby-plugin-strapi-source-extender · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._