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

[MaralS]

Description

GraphQL error.

Environment

Gatsby version: 1.1.27
Node.js version: 8.9.3
Operating System: OSX El Capitan

File contents (if changed):

`gatsby-config.js`: <!-- code block or not changed -->
module.exports = {
  siteMetadata: {
    title: `Contrôle technique des Hexagones`,
    siteUrl: `https://www.autocontrole-hexagones.fr`

  },
  plugins: [`gatsby-plugin-react-helmet`,
    `gatsby-plugin-catch-links`, 
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages/conseils`,
        name: `conseils`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
              // Remove the default behavior of adding a link to each
              // image.
              linkImagesToOriginal: true,
              // Analyze images' pixel density to make decisions about
              // target image size. This is what GitHub is doing when
              // embedding images in tickets. This is a useful setting
              // for documentation pages with a lot of screenshots.
              // It can have unintended side effects on high pixel
              // density artworks.
              //
              // Example: A screenshot made on a retina screen with a
              // resolution of 144 (e.g. Macbook) and a width of 100px,
              // will be rendered at 50px.
              //
              // Defaults to false.
              sizeByPixelDensity: false,
            },
          },
        ],
      }
    },
    {
      resolve: `gatsby-plugin-sitemap`
    },
    {
      resolve:  `gatsby-transformer-sharp`
    },
   {
     resolve: `gatsby-plugin-sharp`
   }

],

}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.127",
    "gatsby-link": "^1.6.30",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "global": "^4.3.2",
    "gulp-cli": "^1.4.0",
    "moment": "^2.20.1",
    "netlify-cli": "^1.2.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "gatsby-image": "^1.0.31",
    "gatsby-plugin-catch-links": "^1.0.14",
    "gatsby-plugin-netlify": "^1.0.12",
    "gatsby-plugin-sharp": "^1.6.24",
    "gatsby-plugin-sitemap": "^1.2.9",
    "gatsby-remark-images": "^1.5.36",
    "gatsby-source-filesystem": "^1.5.10",
    "gatsby-transformer-remark": "^1.7.24",
    "gatsby-transformer-sharp": "^1.6.16",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^7.0.0",
    "gulp-clean-css": "^3.9.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^4.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^3.0.0",
    "prettier": "^1.8.2",
    "pump": "^2.0.0",
    "react-burger-menu": "^2.1.11",
    "react-google-maps": "^9.4.3",
    "react-icons": "^2.2.7",
    "react-share": "^1.19.0",
    "react-transition-group": "^2.2.1",
    "recompose": "^0.26.0",
    "rename": "^1.0.4"
  }
}

gatsby-node.js:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

const path = require('path');

exports.createPages = ({ boundActionCreators, graphql }) => {
    const { createPage } = boundActionCreators;

    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);

    return graphql(`{
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      limit: 1000
    ) {
      edges {
        node {
          excerpt(pruneLength: 250)
          html
          id
          frontmatter {
            date
            path
            title

          }
        }
      }
    }
  }`)
        .then(result => {
            if (result.errors) {
                return Promise.reject(result.errors);
            }

            result.data.allMarkdownRemark.edges
                .forEach(({ node }) => {
                    createPage({
                        path: node.frontmatter.path,
                        component: blogPostTemplate,
                        context: {} // additional data can be passed via context
                    });
                });
        });
}

Actual result

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

  file: /Users/maralsabbagh/Sites/autocontrole/src/pages/conseils/index.js

   2 |   query IndexQuery {
   3 |     allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
   4 |       edges {
   5 |         node {
   6 |           excerpt(pruneLength: 250)
   7 |           id
   8 |           frontmatter {
   9 |             title
  10 |             date(formatString: "DD/MM/YYYY")
  11 |             path
12 |             image {
     |                   ^
  13 |                 childImageSharp{
  14 |                     sizes(maxWidth:1000, quality: 80, cropFocus: CENTER, toFormat: JPG) {
  15 |                         ...GatsbyImageSharpSizes
  16 |                     }
  17 |                     responsiveSizes(maxWidth: 800, quality: 80, cropFocus: CENTER, toFormat: JPG){
  18 |                         src
  19 |                         srcSet
  20 |                         sizes
  21 |                       }
  22 |                 }

Expected behavior

No error message, display all the blog posts with their featured image.

Steps to reproduce

1. I created a branch named develop

2. I did a new commit and pushed on the repository

3. I restarted the server yarn develop and the error message occurred

I also tried to :

• Delete .cache folder
• Delete the entire project and clone it again from GitHub
• Install all the dependencies withyarn install
• Restart the development server with yarn develop

Everything worked fine before the creation of the branch. It's very frustrating actually because I struggled with this type of issue kinda week.
Anyone can help ?

Thanks
Maral

[KyleAMathews]

What does your markdown file look like?

[MaralS]

@KyleAMathews : here is my markdown file

path: "/conseils/bonjour-tout-le-monde"
date: "2017-12-12"
title: "Entretien du véhicule"
image: "./entretien-voiture-reparation.jpg"
---
# Comment entretenir votre véhicule

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

![alt text](mercedes-benz.jpg  "Intérieur de voiture de luxe Mercedes")

## Étape 1
- Unordered item 1
- Unordered item 2
- Unordered item 3
- Unordered item 4


## Étape 2
1. Ordered item 1
2. Ordered item 2
3. Ordered item 3
4. Ordered item 4 

### Titre de niveau 3

#### Titre de niveau 4

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

##### Titre de niveau  5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

###### Titre de niveau 6


Oooooh-weeee, my first blog post!

If you want, I put my repo public https://github.com/MaralS/autocontrole.git

I deleted the branch develop because it caused such a mess ! -_-

[KyleAMathews]

Often what is happening here is that it'll work with one markdown file but stop working with a new one as the new file changes the "type" of one of the frontmatter fields. E.g. perhaps in your develop branch, a markdown file was added where image wasn't pointing at a file. In which case Gatsby would not know for sure if the true "type" of image is to point at files.

[MaralS]

@KyleAMathews What can I do ? Delete the first blog post and recreate a new one ??

[KyleAMathews]

Did you add new markdown files on the develop branch?

[MaralS]

@KyleAMathews No, I completely removed the branch I didn't do new work. I saw that caused the problem I remove from locally and remotely

[MaralS]

@KyleAMathews so what can I do ?
I tried to upgrade all the dependencies, gatsby...etc doing yarn upgrade global and yarn upgrade gatsby
When I remove all the section related to ChildImageSharp, there is no compilation error. This is the image part that cause the problem, but the thing is how can I fix the problem?

[KyleAMathews]

@MaralS you mis-typed the image file name :-) https://github.com/MaralS/autocontrole/blob/master/src/pages/conseils/12-12-2017-bonjour-tout-le-monde/index.md

[MaralS]

@KyleAMathews I hate myself right now, thank you so much ! I think I'm too tired... XD
I'm closing the issue thanks a lot ! 👍

[Jaikant]

@KyleAMathews having the schema defined before hand would avoid this issue. I have been wrestling similar issues because of markdowns having different frontmatter.

[pieh]

@Jaikant check https://github.com/gatsbyjs/gatsby/issues/3344#issuecomment-359644133 - I'm actually working on that

[coreyward]

I've run into this a LOT. Is there any way to add some debugging info to figure out which file or source prompted Gatsby to interpret a field as String instead of File?

[KyleAMathews]

@coreyward could you put up a reproduction of the problem? I put a bunch of time fixing this late last fall and haven't heard many if any complaints since. Also please double-check you're on the latest version of Gatsby :-)

[KyleAMathews]

This is where the logic for determining if a field points to a file ishttps://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/types/type-file.js

[arsdehnel]

Mine is not _exactly_ the same situation but very similar from my perspective:

// graphql query for src/pages/index.js

export const query = graphql`
    query ElementsQuery {
        allMarkdownRemark(
            filter: { frontmatter: { elementName: { ne: null } } }
            sort: { fields: [frontmatter___order], order: ASC }
        ) {
            edges {
                node {
                    frontmatter {
                        tagline
                        what
                        why
                        elementName
                        owner {
                            name
                            email
                        }
                        consumers
                        order
                    }
                    html
                }
            }
        }
    }
`;

Error in terminal:

GraphQL Error Field "elementName" of type "File" must have a selection of subfields. Did you mean "elementName { ... }"?

  file: /Users/dehnel/Projects/cpd/nackle/src/pages/index.jsx

   3 |         allMarkdownRemark(
   4 |             filter: { frontmatter: { elementName: { ne: null } } }
   5 |             sort: { fields: [frontmatter___order], order: ASC }
   6 |         ) {
   7 |             edges {
   8 |                 node {
   9 |                     frontmatter {
  10 |                         tagline
  11 |                         what
  12 |                         why
> 13 |                         elementName
     |                         ^
  14 |                         owner {
  15 |                             name
  16 |                             email
  17 |                         }
  18 |                         consumers
  19 |                         order
  20 |                     }
  21 |                     html
  22 |                 }
  23 |             }

gatsby-config.js

const path = require( 'path' );

module.exports = {
  siteMetadata: {
    title: 'nackle'
  },
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'content',
        path: path.resolve( __dirname, './content/' )
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'resources',
        path: path.resolve( __dirname, './resources/' )
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-autolink-headers'
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-sass',
      options: {
        includePaths: [
          path.resolve( __dirname, './node_modules' ),
          path.resolve( __dirname ),
        ]
      }
    },
    'gatsby-plugin-catch-links',
    'gatsby-plugin-react-helmet'
  ],
};

The elementName frontmatter is on _some_ of the files in /content but not all, not sure if that plays into the problem. But all of the ones that _do_ have it have a string value. Working through converting a v1 site to v2 and can't seem to get past this. I've run into it periodically in the v1 site but always somehow got past it with a random selection of file resaving and rerunning the build. I couldn't reproduce it consistently enough to have much to report.