Field "thumbnail" must not have a selection since type "String" has no subfields

Question

I have the following error with gatsbyJS : Field "thumbnail" must not have a selection since type "String" has no subfields.

I already tryied to change the order of my plugin in my gatsby config file. When i go to : http://127.0.0.1:8000/__graphql and do this:

  query {
    profilePicture: file(absolutePath: { regex: "img/profile_picture.png/" })
    logoCreditAgricole: file(absolutePath: { regex: "img/logo-credit-agricole.png/" })
    site {
      siteMetadata {
        author
        social {
          twitter
        }
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { template: { eq: "project" } } }
      ) {
      edges{
        node{
          excerpt
          fields{
            slug
          }
          frontmatter{
            date(formatString: "MMMM DD, YYYY")
            title
            thumbnail
          }
        }
      }
    }
  }

I have to remove

      childImageSharp {
        fluid(maxWidth: 100) {
          ...GatsbyImageSharpFluid
        }
      }

to make it work

Here is my page query:

export const pageQuery = graphql`
  query {
    profilePicture: file(absolutePath: { regex: "img/profile_picture.png/" }) {
      childImageSharp {
        fluid(maxWidth: 700) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    logoCreditAgricole: file(absolutePath: { regex: "img/logo-credit-agricole.png/" }) {
      childImageSharp {
        fluid(maxWidth: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    site {
      siteMetadata {
        author
        social {
          twitter
        }
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { template: { eq: "project" } } }
      ) {
      edges{
        node{
          excerpt
          fields{
            slug
          }
          frontmatter{
            date(formatString: "MMMM DD, YYYY")
            title
            thumbnail {
              childImageSharp {
                fluid(maxWidth: 700) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`

My gatsbyconfig :

module.exports = {
  siteMetadata: {
    title: `Florent Vandroy`,
    author: `Florent Vandroy`,
    description: `Développeur web indépendant dans le secteur de Bergerac. Disponible pour la création ou modification de votre site web.`,
    siteUrl: `http://127.0.0.1:8000/`,
    social: {
      twitter: `alisalahio`,
    },
    projects: [
      {
        title: `Gatsby Starter Blog & Portfolio!`,
        description: `Gatsby official starter with portfolio section added!`,
        url: `https://gatsby-starter-blog-and-portfolio.netlify.com/`,
        moreLinks: [
          {
            type: `Github`,
            url: `https://github.com/alisalahio/gatsby-starter-blog-and-portfolio`,
          },
        ],
      },
      {
        title: `React`,
        description: `React's homepage is created with Gatsby!`,
        url: `https://reactjs.org/`,
      },
    ],
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },    
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/project`,
        name: `project`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `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/gatsby-icon.png`,
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-sass`
  ],
}

my index.md file inside /content/project/index.md :

---
title: Hello World
date: "2015-05-01T22:12:03.284Z"
template: "project"
thumbnail: "/cashprono.png"
---

Thank to all who will try to help me.

Answer 1

There are multiple sources for this error:

• Check the spelling of the images: if you are querying for an abc.jpg and your image is named def.jpg Gatsby will resolve the missing image field as a string by default. It will happen the same for missing images, as well as for wrong (check relativity of paths using dots) paths or format image types (jpg, png, etc).

• If your image is not a sibling, or in other words, is in the same folder as the JSON file, the appropriate plugins will resolve them to strings, as it does not actually "knows" where the file is located. In other words, your image should be inside an only-image folder.

  Otherwise, it will resolve the files to a file node. You can confirm this by issuing gatsby develop, open http://localhost:8000/___graphql, and on the right side, on the docs, go through the hierarchy of nodes. You'll see that is actually a string, but if you move the images to the same folder and make the necessary adjustments, issue gatsby clean to purge all cached items and reissue gatsby develop and open a new window to http://localhost:8000/___graphql, you'll see that the now the item is actually a file node.

Resources:

• https://github.com/gatsbyjs/gatsby/issues/4123
• https://github.com/gatsbyjs/gatsby/issues/13322