Treatment and optimization of GatsbyImage component in gatsby-plugin-image

[ammonialime]

I'm using the new gatsby-image-plugin in my project. In this particular case I'm creating a slider with several images. At first I tried using the StaticImage component with local images in the src/images folder and was really impressed with the performance I was getting. However, I need to pull these images from Contentful now. I've installed the Contentful plugin and wired everything up, however, I cannot use the StaticImage component with these images, even if I use the 'download' mode where the content is cached locally prior to build. This forces me to use the GatsbyImage component as explained in the docs.

I've used a recent example uploaded to the Gatsby GitHub as to how to pull these images and work with Contentful.

Example Here

However, I'm not getting the same kind of image optimization as I was with Static Image. I'm not sure why and I'm not an image optimization expert but all I'd like to achieve is a similar results as to what I was getting when using StaticImage.

The plugin guide suggests using the childImageSharp https://www.gatsbyjs.com/plugins/gatsby-plugin-image however I can't find this option in GraphiQL. The official example on Github linked earlier use uses gatsbyImageData without childImageSharp wrapping it, which is what I've done. I'm not sure if this is the reason I'm not getting the ideal performance or what I'm missing but would really appreciate some help on this.

My query looks like the following. I've tried to wrap gatsbyImageData(layout: CONSTRAINED, width: 800, placeholder: BLURRED) with a child childImageSharp but I get an error that says this type does not exist on type ContentfulAsset.

    query MyQuery {
      allContentfulImageGroup(filter: { title: { eq: "Product Images" } }) {
        nodes {
          images {
            file {
              fileName
            }
            gatsbyImageData(layout: CONSTRAINED, width: 800, placeholder: BLURRED)
          }
        }
      }
    }