Strapi dynamic zone - display image in Gatsby

I am using Strapi with Gatsby and having difficulty rendering images within a dynamic zone. I am using:

• Strapi 3.6.2
• Gatsby 3.5.1
• gatsby-source-strapi 1.0.0
• gatsby-plugin-image 1.5.0
• gatsby-plugin-sharp 3.5.0
• gatsby-transformer-sharp 3.5.0

Top level image fields found directly in collection types can be queried easily with GraphQL to return gatsbyImageData, see thumbnail field as an example:

query MyQuery {
  allStrapiPage {
    nodes {
      Title
      Body
      thumbnail {
        localFile {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
}

However, in the query above Body is a dynamic zone field with dozens of selectable components, many of which contain image fields. The data returned for Body is standard JSON data meaning the image fields don't have the required gatsbyImageData, see example response:

    "Body": [
    {
        "PrimaryImage": {
            "id": 12,
            "name": "Test Image",
            "alternativeText": "",
            "caption": "",
            "width": 338,
            "height": 260,
            "formats": {
                "thumbnail": {
                    "name": "thumbnail_Test Image",
                    "hash": "thumbnail_testimage_c3ced5807d",
                    "ext": ".png",
                    "mime": "image/png",
                    "width": 203,
                    "height": 156,
                    "size": 78.25,
                    "path": null,
                    "url": "/uploads/thumbnail_testimage_c3ced5807d.png"
                }
            },
            "hash": "testimage_c3ced5807d",
            "ext": ".png",
            "mime": "image/png",
            "size": 154.53,
            "url": "/uploads/testimage_c3ced5807d.png",
            "previewUrl": null,
            "provider": "local",
            "provider_metadata": null,
            "created_at": "2021-04-19T14:20:38.086Z",
            "updated_at": "2021-04-19T14:20:38.133Z",
            "localFile___NODE": "c5a14269-31a2-505a-b2ff-8251e6ca5051"
        },
        "strapi_component": "sections.task-row"
}
    }]

<StaticImage /> doesn't accept a dynamic src so I cannot use the url field. I have to use <GatsbyImage/> which requires gatsbyImageData object.

Is there any way to modify the query OR use the fields that are available to get images rendering with <GatsbyImage />

The only solution I can think of at the moment is using hooks/build process to move/copy images

• From Strapi: ./backend/public/uploads/test_image.png
• To Gatsby: ./frontend/static/test_image.png

And then render them statically using <StaticImage />

I am hesitant as this feels to go against the grain and may be slow with thousands of images.

from Strapi dynamic zone - display image in Gatsby