gatsby-plugin-image, getting error: Cannot query field "childImageSharp" on type "ContentfulAssetFile".

[oleksii-lukin]

It works fine with file (from examples if I recall correctly)

{
  file(relativePath: {eq: "shared/glasses-image.png"}) {
    childImageSharp {
      gatsbyImage(layout: FLUID, maxWidth: 664) {
        imageData
      }
    }
  }
}

but with this query

query allContentfulProductsQuery {
  allContentfulProducts {
    edges {
      node {
        mainImage {
          childImageSharp {
            gatsbyImage(layout: FLUID, maxWidth: 664) {
              imageData
            }
          }
        }
      }
    }
  }
}

or this part changed to file

        mainImage {
          file {
            childImageSharp {
              gatsbyImage(layout: FLUID, maxWidth: 664) {
                imageData
              }
            }
          }
        }

it's throwing an error Cannot query field "childImageSharp" on type "ContentfulAsset".

Can I use gatsby-plugin-image with contentful assets images? Or should it have some particular type selected in content model or inside config of gatsby-source-contentful or gatsby-plugin-sharp or other plugin I may be missing?

[rodneylab]

Hi Alexey,
I think you might need to try querying a localFile object. For the Gatsby 100 Days of Code challenge with Contentful I had something like this:

export const query = graphql`
  query LocationTemplateQuery($id: String) {
    site {
      ...SEOFragment
    }
    contentfulLocation(id: { eq: $id }) {
      bannerImage {
        localFile {
          childImageSharp {
            gatsbyImageData(
              width: 1984
              layout: CONSTRAINED
              sizes: "(max-width: 480px) 480px, (max-width: 768px) 768px, 992px"
            )
          }
        }
      }
    }

(see this repo for more context)

Can you adapt this query for you case, to something like:

query allContentfulProductsQuery {
  allContentfulProducts {
    edges {
      node {
        mainImage {
          localFile {
            childImageSharp {
             gatsbyImage(layout: FLUID, maxWidth: 664) {
                imageData
              }
            }
          }
        }
      }
    }
  }
}

Tell me if I am talking nonsense and I can take another look!

Rodney

[oleksii-lukin]

Oh yes, it probably is

downloadLocal [boolean][optional] [default: false]
Downloads and caches ContentfulAsset’s to the local filesystem. Allows you to query a ContentfulAsset’s localFile field, which is not linked to Contentful’s CDN. See Download assets for static distribution for more information on when and how to use this feature.

[rodneylab]

Hi Alexey,
Yes localFile was in my GraphiQL I didn't have to do anything special to get it to appear. Search around a little in the tree, it might be hiding somewhere deeper!
I used the gatsby-source-contentul plugin version 5.2.0.
Let me know how you get on

[k31tha]

If you use the explorer url ie http://localhost:8000/___graphql what do you see when you navigate?
Im using for example
query MyQuery { allContentfulLocation { edges { node { heroImage { gatsbyImageData } } } } }

[oleksii-lukin]

@k31tha I see no gatsbyImageData on assets.

I tried example from https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful
and it have it on assets:

while for my site (using same plugins gatsby-plugin-image, gatsby-source-contentful, gatsby-transformer-remark) I see no gatsbyImageData on ContentfulAsset nodes. There is gatsbyImageData on file nodes, but it's not present for ContentfulAsset nodes

[oleksii-lukin]

I think I found what the problem was. My gatsby were still at 2.xx, after I updated gatsby and all plugins to next versions, it's now appeared.