Gatsby: Field "______" must not have a selection since type "String" has no subfields.

[durkinio]

I've been struggling with this for a week now, but can't seem to get any closer to a solution. I'm trying to show a frontmatter defined cover image on my blog.

Here's the top of the markdown file:

path: "/blog/my-path"
date: "2017-07-14T03:49:16.408Z"
title: "My title"
cover: "/img/my-image.jpg"

The query:
query BlogPostByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
description
cover {
childImageSharp{
responsiveSizes (maxWidth: 200) {
src
}
}
}
}
}
}

The error:
GraphQL Error Field "cover" must not have a selection since type "String" has no subfields.

Any thoughts on what might be causing this? I've tried multiple examples to resolve, but to no avail 😞

[ghost]

Do you have gatsby-plugin-sharp and gatsby-transformer-sharp in your "gatsby-config.js"?

[calcsam]

What the plugins @zionis137 do are transform your relative path into nested image data. Otherwise they will stay as Strings, which aren't nested, hence the error.

You can verify this by going to GraphiQL and pasting your query in there, but omitting the nested

{ childImageSharp{ responsiveSizes (maxWidth: 200) { src } }

after cover. That should show you that the cover field is still a string -- hence the need for plugins :)

[clem-chimp]

@durkinio and for whoever comes across this issue, I ran into this and found the cause was because the filename I provided to cover: was incorrect.
In my exact example, I gave the name photo.jpg instead of photo.jpeg
Once I corrected it, this compilation error was resolved

[kpennell]

@calcsam

I'm still stuck as hell but this little explanation you wrote actually does help me understand why just a string is a problem....but I just still can't get it to be anything but a string. I just don't know where to look now.

[likarajo]

Add the following in gatsby-config.js

{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: "gatsby-remark-normalize-paths",
options: {
pathFields: ["cover"],
},
}
]
}
}