gatsby: GraphQL Error Field "image" must not have a selection since type "String" has no subfields.
Description
I’ve been getting this error everytime I deploy to Netlify and most times in development. The only way I seem to be able to get around it in development is to delete node_modules and yarn install, and even this doesn’t work every time. If I do get around it in development and I stop gatsby develop, the next time I run it, it comes back and I have to repeatedly delete node_modules and yarn install until it works again.
My directory structure looks like
src
├── posts
│ ├── some-post
│ │ ├── some-image.jpg
│ │ └── index.md
my post frontmatter looks like
---
title: "Some Post"
image: "./some-image.jpg"
draft: false
...other fields
---
my graphQL query looks like
query IndexQuery {
posts: allMarkdownRemark(
limit: 3
filter: {
fileAbsolutePath: { glob: "/**/*/src/posts/**/*.md" }
frontmatter: { draft: { eq: false } }
}
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
node {
excerpt
frontmatter {
slug
date(formatString: "MMMM D, YYYY")
image {
childImageSharp {
sizes(maxWidth: 660) {
...GatsbyImageSharpSizes_tracedSVG
}
}
}
title
tags
}
}
}
}
Environment
Gatsby version: 1.9.202 Node.js version: v8.1.3 Operating System: OSX
File contents (if changed):
gatsby-config.js:
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts`
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 728
}
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`
}
},
"gatsby-remark-prismjs",
"gatsby-remark-copy-linked-files",
"gatsby-remark-smartypants"
]
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
...other plugins
]
package.json:
"dependencies": {
"gatsby": "^1.9.202",
"gatsby-image": "^1.0.37",
"gatsby-plugin-sharp": "1.6.30",
"gatsby-transformer-sharp": "^1.6.19",
...other packages
}
gatsby-node.js:
exports.createPages = ({ boundActionCreators, graphql }) => {
const { createPage } = boundActionCreators;
return new Promise((resolve, reject) => {
const postTemplate = path.resolve("./src/templates/post.js");
...other templates
resolve(
graphql(`
{
posts: allMarkdownRemark(
filter: { fileAbsolutePath: { glob: "/**/*/src/posts/**/*.md" } }
) {
edges {
node {
frontmatter {
slug
draft
}
}
}
}
...similar queries
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
result.data.posts.edges.forEach(({ node }) => {
if (!node.frontmatter.draft) {
createPage({
path: `/posts/${node.frontmatter.slug}/`,
component: postTemplate,
context: {
slug: node.frontmatter.slug
}
});
}
});
...similar page creation
})
);
});
};
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 2
- Comments: 21 (9 by maintainers)
Commits related to this issue
- Remove images to force a reset https://github.com/gatsbyjs/gatsby/issues/4123#issuecomment-461774560 — committed to uchidashokudo/uchida by nbw 5 years ago
@dajocarter delete fields with empty strings completely and keep fields that actually point to a file - when we construct schema types we check if string does look like a path and empty string does not so we don’t transform it to File link
i restarted my dev server with “gatsby clean” and it doesn’t help me. Look like bug
I used the correct .jpg or JPG, but it still didn’t work. So I ended up recloning my repo,
npm install,gatsby dev, and it was fixed.Edit: This comment has incorrect information. In my example, I set
imageto be of typeString, which won’t get me an image. I should have setimagetoFile @fileByRelativePathAfter hours debugging this, I decided to make the simplest possible example to show how broken this error truly is. I forked the official gatsby-starter-blog and did nothing but add an “image” property to the frontmatter for the
salty_egg.jpgimage already in the project. I then included that “image” property ingatsby-node.js. Even then, runningnpm installandgatsby develop, then going tolocalhost:8000/___graphqlshows that Frontmatter.Image is of type String, not File. You can try cloning my gatsby-starter-blog fork and see if you get the same results.A few other things I made sure to do that didn’t fix the issue:
gatsby-transformer-sharpandgatsby-plugin-sharpat the top of thegatsby-config.jsplugins, before anygatsby-source-filesystemdeclarations. This is suggested on Gatsby’s troubleshooting page. Note: the gatsby-starter-blog does not do this currently.salty_egg.jpgfile already in the repo, which is correctly referenced in the markdown. I used the same naming convention as the Gatsby docs suggest (i.e. something likeimage: salty_egg.jpg.If I were you reading this, I would recommend giving up on this functionality before you waste any more time. If even a simple implementation forked off of Gatsby’s official starter blog doesn’t work, I don’t know what would.
@LekoArts thank you for pointing that out. I confirmed that solution works, and I added an edit to the top of my comment.
I must have overlooked how the docs for preprocessing external images does exactly what you suggested.
I think Gatsby’s troubleshooting for this issue should include using
File @fileByRelativePath. I went through many issues (example #1, example #2, example #3, example #4, example #5) and never found this suggestion.@nbw’s solution of restarting the development environment worked for me.
It seems like when updating markdown files while
gatsby devis running, the GraphQL schema isn’t regenerating with the updated content. Or at least, it’s updating it slowly and sometimes thinking that certain fields are empty. 🤷♂@kpennell the issue is that these are incredibly hard to reproduce and vary based on machine setup.
Oftentimes this is caused by some type of Sharp error out of our control, so if you can reliably reproduce this we’d love to take a look.
@xuopled https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/types/type-file.js#L28
Problem here will be that we compile all nodes to create representative data sample. So it will see that string is empty - but we can’t tell if that’s just string field or file field at this point, so we would need to adjust compiling down example node to prefer non-empty strings over empty strings for generating representative object (somewhere here https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/data-tree-utils.js )
@jacknugent Please note that your error is here: https://github.com/jacknugent/gatsby-starter-blog/blob/master/gatsby-node.js#L109
You’re forcing the
imageto be aStringso it’s expected that you don’t get an image. It has to beFile @fileByRelativePath. Please edit your comment as your information is incorrect and gives the false impression that this doesn’t work.I had this issue, what fixed it for me was taking all the images out of the folder, doing a git commit and putting them back with the correct .JPG or .jpg
Hope that helps someone