Gatsby Source Strapi plugin not processing images in dynamic zones

Questions and Answers
2

For those who are interested, this is my “dirty” solution:

I ended up creating a new object on the node in onCreateNode. Let’s say the dynamic zone is called “content” the new object would be called “contentImages”. Then I walked “content” (which is an array of objects which represent each components structure). For every component which I knew it had images, I used createRemoteFileNode to load the images and pushed an object containing the file node id.

exports.onCreateNode = async ({
  node,
  actions: { createNode },
  store,
  cache,
  createNodeId,
}) => {
  if (node.internal.type === "StrapiArticle") {
    if (node.content !== null && node.content.length) {
      let contentImages = [];
      for (let i = 0, len = node.content.length; i < len; i++) {
        const block = node.content[i];
        const blockImages = {};
        if (
          block.strapi_component === "content-blocks.gallery" &&
          block.images !== null &&
          block.images.length
        ) {
          blockImages.images = [];
          for (let j = 0, len2 = block.images.length; j < len2; j++) {
            let fileNode = await createRemoteFileNode({
              url: `${CMS_URL}${block.images[j].url}`, // string that points to the URL of the image
              parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
              createNode, // helper function in gatsby-node to generate the node
              createNodeId, // helper function in gatsby-node to generate the node id
              cache, // Gatsby's cache
              store, // Gatsby's Redux store
            });
            blockImages.images.push(
              fileNode ? { localFile___NODE: fileNode.id } : {}
            );
          }
        }
        contentImages.push(blockImages);
      }
      node.contentImages = contentImages;
    }
  }

To make working with the data more comfortable I deep merged “content” and “contentImages” after receiving it from a graphql query which ended in having a localFile property with childImageSharp included.

3 Likes