A potential fix for weird “GatsbyJS GraphQL Error Field "image" must not have a selection since type "String" has no subfields.”

Several GatsbyJS users have run into the following error or something very similar:

GraphQL Error Field "image" must not have a selection since type "String" has no subfields.

There seem to be various issues that can cause the error, including having empty strings in various places in your codebase. Here’s one GitHub thread discussing it. None of the solutions provided in that thread helped me.

How I solved the problem on my Gatsby site

My issue was oddly related to two things, the SVG file format, and not using a forward slash in my image src attribute value.

I had been using the following HTML to embed JPG and PNG images into my markdown files:

<img src="name-of-file.jpg" alt="description of image">

And it works without issue.

Note: my markdown and media files for posts are in the same directory.

But then I tried to embed an SVG graphic file:

<img src="name-of-file.svg" alt="description of graphic">

And that immediately throws me the error, not in development mode, but in production when I push updates to my Netlify production server.

Here’s the entire error I get from Netlify (but not locally, oddly):

1:12:58 PM: error GraphQL Error Field "thumbnail" must not have a selection since type "String" has no subfields.
1:12:58 PM:   file: /opt/build/repo/src/utils/fragments/cover.js
1:12:58 PM:    8 |     src: publicURL
1:12:58 PM:    9 |   }
1:12:58 PM:   10 |   fragment cover on MarkdownRemarkFrontmatter {
1:12:58 PM:   11 |     cover {
1:12:58 PM:   12 |
1:12:58 PM:   13 |
1:12:58 PM:   14 |       caption
1:12:58 PM:   15 |       img {
1:12:58 PM:   16 |         ...sharpSrc
1:12:58 PM:   17 |       }
1:12:58 PM: > 18 |       thumbnail {
1:12:58 PM:      |                 ^
1:12:58 PM:   19 |         ...sharpSrc
1:12:58 PM:   20 |       }
1:12:58 PM:   21 |     }
1:12:58 PM:   22 |   }

In your case, it might say "image" instead of "thumbnail", or something else, depending on your naming convention in your GraphQL query.

“The solution”

The solution, oddly, was to add a forward slash to my src attribute value:

<img src="/name-of-file.svg" alt="description of graphic">

Then everything works fine.

Why can you import JPG and PNG files just fine without using the forward slash, but not SVGs? I don’t know. It’s so inconsistent that I can’t wrap my head around it. I found this forward slash solution by just trying different things and accidentally found the fix.

Update

I was just about to publish this article when it hit me that I do have some empty lines in in the cover.js file where the error came from:

export const query = graphql`
  fragment sharpSrc on File {
    sharp: childImageSharp {
      fluid(maxWidth: 2200) {
        ...GatsbyImageSharpFluid_withWebp
      }
    }
    src: publicURL
  }
  fragment cover on MarkdownRemarkFrontmatter {
    cover {

 
      caption
      img {
        ...sharpSrc
      }
      thumbnail {
        ...sharpSrc
      }
    }
  }
`

See the gap between cover { and caption? I just removed that, and now I can import SVG files just fine without using the forward-slash /.

So that’s what "String" has no subfields. refers to, the empty lines in my GraphQL query? I guess so. I just didn’t see the connection earlier, and I’m still a bit confused as to why this is only causing a problem when I import SVG files...

Anyway, if you have the same error, locate the file that your error is coming from and check if you have any empty lines in your GraphQL queries because that might just be the cause of your problem!