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

Description

GraphQL error. probleme

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 <mathews.kyle@gmail.com>",
  "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 with yarn 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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (10 by maintainers)

Most upvoted comments

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