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

[stevanpopo]

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.

[stevanpopo]

Does it make a difference that I'm resolving images from multiple locations?

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `codewithbootcamps.com`,
    author: `Stevan Popovic`,
    description: `Find, compare and choose the best coding bootcamp in London and kick-start your switch to a career in software development.`,
    siteUrl: `https://www.codewithbootcamps.com/`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/brands`,
        name: `brands`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 740,
              wrapperStyle: `margin-bottom: 2.2rem;`,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 2.2rem;`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-148403702-1`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/favicon-32x32.png`,
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-sass`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-twitter`,
    `gatsby-plugin-force-trailing-slashes`,
  ],
}

[jonniebigodes]

@stevanpopo i saw that you mentioned me in another issue that might be related to this. If you don't mind waiting a bit i'll see what is wrong and come back with a response, sounds good?

[stevanpopo]

@jonniebigodes yep, sounds good. I saw you answered something relevant when I was digging through other issues, so thought you might have some insight here.

It looks like for some reason gatsby-transformer-sharp isn't turning my file paths into file objects.

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[jonniebigodes]

@stevanpopo i've been through this and i think i have a solution for you.

I'm going to describe the steps and what i believe is the cause of the issue.

• Created a new gatsby website based on the package versions you have.
• Updated gatsby-config.js to match yours.
• Added some content for testing purposes. Namely created a new file under src\blog\bootcamps called index.md with the following content:

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

# This is a dummy blog entry for bootcamps

This is some dummy content to illustrate something something

## One bit of information

• Copied over a dummy image to the folder and make both files "siblings".
• Ran gatsby develop and the build goes through without any issue.
• Ran gatsby clean to get a clean slate and then issued gatsby build && gatsby serve and i'm presented with the issue.
• Went back to development mode and opened http://localhost:8000/___graphql ran the query and i'm presented with the following:

• Updated the query in the template file to:

query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 630) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

• Opened the blog post i mentioned earlier and i'm presented with:
  

• Ran gatsby clean to once again get a clean slate and ran once again gatsby build && gatsby serve, the build goes through and opening up http://localhost:9000/bootcamps/ i'm presented with the image and content without any issues.

What i would like for you to do is update the query and trigger a build to see if the issue is resolved, if not it could probably be a good thing to create a minimal reproduction like @LekoArts mentioned so that we can take a more detailed look at what might be causing this issue. Sounds good?

[stevanpopo]

@jonniebigodes thank you so much for taking the time to write this detailed response. I must apologise though, as I have wasted your time. On second look, I found the error and it was completely my fault. On one of the posts, I had a typo in the file path, meaning the file wasn't found, turning all of them into strings, rather than file objects. Completely my error. Thanks again for helping anyway.

[jonniebigodes]

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

[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.