Strapi dynamic zone - display image in Gatsby

Question

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 />

Update: A Strapi developer has confirmed this is not currently possible. My best solution at the moment is unfortunately not to use gatsby-plugin-image and use <img src={imagepath} /> instead where imagepath references the image directly through a running instance of Strapi e.g. http://localhost:1337/uploads/test-image.png

Alternatively, you could include the copying of images from your Strapi folder to your Gatsby folder into your build process so you can reference them locally in Gatsby if you'd rather keep the environments separate. (may be slow for lots of images)

Still hoping for a better solution :)

how you are getting just the thumbnail, in my case i'm getting thumbnail, small, large, is it possible to just get the original image ? not to generate the thumbnails,small, large ? — Yasir, Jun 16 '21 at 17:55

score 0 · Answer 1 · answered May 25 '21 at 14:38

For Dynamic zones in Strapi we need to use spread operators(...) followed by on then __typename of the Component

Eg:

 DynamicZoneName{
...on ComponentName{
            // component values
                   }
   ...on AnotherComponentName{
            // component values
                   }

      }

In your case the new query should be similar to:

query MyQuery {
          allStrapiPage {
            nodes {
              Title
              Body{
                 ... on ComponentPrimaryImage{
                       formats,
                       url,
                       name,
                       id,
                       //any other values you want
                    }
                }
              thumbnail {
                localFile {
                  childImageSharp {
                    gatsbyImageData
                  }
                }
              }
            }
          }
        }

Steps

Open Graphql url fro strapi application.
Write your old query
Within parenthesis of Dynamic Zone write
```
 ... on 
```
Open the auto Finish to get linked __typename of dynamic zones
Refer to initial code block to proceed ahead

Refer this article to understand dynamic zones implementation in graphql

Thank you for taking the time to answer. However, I believe your solution is for older versions of `Strapi` and `gatsby-source-strapi`. Please see this article: https://strapi.io/blog/introducing-the-new-gatsby-source-strapi-plugin which announces native support for Dynamic Zones. Remi a Strapi developer has confirmed that `gatsby-plugin-image` is not currently supported in Dynamic Zones. — Kiee, May 26 '21 at 09:54

Strapi dynamic zone - display image in Gatsby

1 Answers1