Unable to query frontmatter image - GraphQL Error Field "featuredImage" must not have a selection since type "String" has no subfields.

Description

I have added an image to a blog post (via frontmatter) that I am trying to access via a GraphQL query but fails on the build.

Code

My frontmatter

---
title: "How To Choose The Right Coding Bootcamp"
featuredImage: ./codebootcamps.jpg
---

Note - This frontmatter exists in an index.md file which is a sibling to the image. post_folder –> index.md –> codebootcamps.jpg

My query

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        featuredImage {
          childImageSharp {
            sizes(maxWidth: 630) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
  }
`

Expected result

Image path to be available in blog post on render.

Actual result

The build fails with this error: GraphQL Error Field “featuredImage” must not have a selection since type “String” has no subfields.

This result is confirmed when I view in GraphiQL.

Environment

I have both gatsby-transformer-sharp and gatsby-plugin-sharp installed.

System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4250U CPU @ 1.30GHz
    Shell: 5.5.1 - /usr/local/bin/zsh
  Binaries:
    Node: 9.4.0 - ~/.nvm/versions/node/v9.4.0/bin/node
    Yarn: 1.6.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v9.4.0/bin/npm
  Languages:
    Python: 2.7.6 - /usr/local/bin/python
  Browsers:
    Chrome: 79.0.3945.88
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.50 => 2.13.50
    gatsby-image: ^2.2.8 => 2.2.8
    gatsby-plugin-feed: ^2.3.6 => 2.3.6
    gatsby-plugin-force-trailing-slashes: ^1.0.4 => 1.0.4
    gatsby-plugin-google-analytics: ^2.1.6 => 2.1.6
    gatsby-plugin-manifest: ^2.2.4 => 2.2.4
    gatsby-plugin-offline: ^2.2.4 => 2.2.4
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3
    gatsby-plugin-sass: ^2.1.15 => 2.1.15
    gatsby-plugin-sharp: ^2.2.9 => 2.2.9
    gatsby-plugin-sitemap: ^2.2.16 => 2.2.16
    gatsby-plugin-twitter: ^2.1.9 => 2.1.9
    gatsby-plugin-typography: ^2.3.2 => 2.3.2
    gatsby-remark-copy-linked-files: ^2.1.4 => 2.1.4
    gatsby-remark-images: ^3.1.7 => 3.1.7
    gatsby-remark-prismjs: ^3.3.4 => 3.3.4
    gatsby-remark-responsive-iframe: ^2.2.4 => 2.2.4
    gatsby-remark-smartypants: ^2.1.2 => 2.1.2
    gatsby-source-filesystem: ^2.1.8 => 2.1.8
    gatsby-transformer-remark: ^2.6.10 => 2.6.10
    gatsby-transformer-sharp: ^2.2.5 => 2.2.5
  npmGlobalPackages:
    gatsby-cli: 2.7.15

Thanks for any help in advance. I appreciate your time.

[stevemarksd]

anyone knows how or who is automatically chosing to convert to an object or a string? I find it a bit fragile that if any field in the frontmatter matches a file path is converted to an image, but if not, is just a string.

[jonniebigodes]

@stevanpopo no need to thank, Glad to know that you managed to solve your issue. And it was no problem writing the response.