gatsby: GraphQL Error Error Field "image" must not have a selection since type "String" has no subfields.
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 <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)
@Jaikant check https://github.com/gatsbyjs/gatsby/issues/3344#issuecomment-359644133 - I’m actually working on that
@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
@KyleAMathews having the schema defined before hand would avoid this issue. I have been wrestling similar issues because of markdowns having different frontmatter.