Gatsby: Graphql image query is breaking for some images.
Description
I started to build my blog in gatsbyjs and I am loving it.
I am using netlifycms with it and netlify for deploying it.I am following gatsby-starter-netlify-cms. In order to display images on the blog, I am storing them at /static/img and provide its path in the markdown frontmatter. However, this works for some images and doesn't work for some other.
Some more info on that -
If you look at https://github.com/jsuraj/Blog/pull/15 you can see that the first build failed while the second passed. The only change is in the image name. The images both of which were uploaded from netlify cms ui and are present at /static/img.
File contents (if changed):
graphql query at /src/pages/index.js where it breaks.
query BlogListQuery {
allMarkdownRemark(
limit: 20
sort: { fields: [frontmatter___date], order: DESC}
) {
edges {
node {
fields {
slug
}
id
excerpt
frontmatter {
path
title
date(formatString: "MMMM DD, YYYY")
author
twitterHandle
title
description
keywords
featuredImage {
childImageSharp{
sizes(maxWidth: 630, maxHeight: 200, cropFocus: CENTER) {
...GatsbyImageSharpSizes
}
}
}
}
}
}
}
}
Actual result
The graphql query fails, for https://github.com/jsuraj/Blog/pull/15/commits/7e5b7523d0066b3814c43856c08c7406a6e095f7
7:32:08 PM: success createPages — 0.073 s
7:32:08 PM: success createPagesStatefully — 0.023 s
7:32:08 PM: success onPreExtractQueries — 0.005 s
7:32:08 PM: success update schema — 0.163 s
7:32:08 PM: GraphQL Error Field "featuredImage" must not have a selection since type "String" has no subfields.
7:32:08 PM: file: /opt/build/repo/src/pages/index.js
7:32:08 PM: 13 | excerpt
7:32:08 PM: 14 | frontmatter {
7:32:08 PM: 15 | path
7:32:08 PM: 16 | title
7:32:08 PM: 17 | date(formatString: "MMMM DD, YYYY")
7:32:08 PM: 18 | author
7:32:08 PM: 19 | twitterHandle
7:32:08 PM: 20 | title
7:32:08 PM: 21 | description
7:32:08 PM: 22 | keywords
7:32:08 PM: > 23 | featuredImage {
7:32:08 PM: | ^
7:32:08 PM: 24 | childImageSharp{
7:32:09 PM: 25 | sizes(maxWidth: 630, maxHeight: 200, cropFocus: CENTER) {
7:32:09 PM: 26 | ...GatsbyImageSharpSizes
7:32:09 PM: 27 | }
7:32:09 PM: 28 | }
7:32:09 PM: 29 | }
7:32:09 PM: 30 | }
7:32:09 PM: 31 | }
7:32:09 PM: 32 | }
7:32:09 PM: 33 | }
7:32:09 PM: success extract queries from components — 0.078 s
7:32:09 PM: success run graphql queries — 0.012 s
7:32:09 PM: success write out page data — 0.002 s
7:32:09 PM: success write out redirect data — 0.001 s
7:32:09 PM: success onPostBootstrap — 0.001 s
7:32:09 PM: info bootstrap finished - 3.109 s
7:32:12 PM: success Building CSS — 4.060 s
7:32:23 PM: success Building production JavaScript bundles — 10.406 s
7:32:27 PM: error Building static HTML for pages failed
7:32:27 PM: See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
7:32:27 PM: 14 |
7:32:27 PM: 15 | render() {
7:32:27 PM: > 16 | const {markdownRemark: post} = this.props.data;
7:32:27 PM: | ^
7:32:27 PM: 17 | return (
7:32:27 PM: 18 | <div className='blog-post'>
7:32:27 PM: 19 | <Helmet>
7:32:27 PM:
7:32:27 PM: WebpackError: Cannot read property 'markdownRemark' of undefined
7:32:27 PM:
7:32:27 PM: - blog-post.js:16 BlogPost.render
7:32:27 PM: src/templates/blog-post.js:16:12
7:32:27 PM:
7:32:27 PM: - ReactCompositeComponent.js:796 ReactCompositeComponentWrapper._renderValidat edComponentWithoutOwnerOrContext
7:32:27 PM: ~/react-dom/lib/ReactCompositeComponent.js:796:1
7:32:27 PM:
7:32:27 PM: - ReactCompositeComponent.js:819 ReactCompositeComponentWrapper._renderValidat edComponent
7:32:27 PM: ~/react-dom/lib/ReactCompositeComponent.js:819:1
7:32:27 PM:
7:32:27 PM: - ReactCompositeComponent.js:359 ReactCompositeComponentWrapper.performInitial Mount
7:32:27 PM: ~/react-dom/lib/ReactCompositeComponent.js:359:1
7:32:27 PM:
7:32:27 PM: - ReactCompositeComponent.js:255 ReactCompositeComponentWrapper.mountComponent ~/react-dom/lib/ReactCompositeComponent.js:255:1
7:32:27 PM:
7:32:27 PM: - ReactReconciler.js:43 Object.mountComponent
7:32:27 PM: ~/react-dom/lib/ReactReconciler.js:43:1
7:32:27 PM:
7:32:27 PM: - ReactMultiChild.js:234 ReactDOMComponent.mountChildren
7:32:27 PM: ~/react-dom/lib/ReactMultiChild.js:234:1
7:32:27 PM:
7:32:27 PM: - ReactDOMComponent.js:657 ReactDOMComponent._createContentMarkup
7:32:28 PM: ~/react-dom/lib/ReactDOMComponent.js:657:1
7:32:28 PM:
7:32:28 PM: - ReactDOMComponent.js:524 ReactDOMComponent.mountComponent
7:32:28 PM: ~/react-dom/lib/ReactDOMComponent.js:524:1
7:32:28 PM:
7:32:28 PM: - ReactReconciler.js:43 Object.mountComponent
7:32:28 PM: ~/react-dom/lib/ReactReconciler.js:43:1
7:32:28 PM:
7:32:28 PM:
7:32:28 PM: Caching artifacts
7:32:28 PM: Started saving node modules
7:32:28 PM: Finished saving node modules
Expected behavior
Images should be displayed in both the cases.
repo: https://github.com/jsuraj/Blog
Can anyone offer any pointers for this one? I am unable to figure out what's going wrong.
...
jsuraj
All 8 comments
This seems strange. Here's what I can see.
Running npm run develop, then opening localhost:8000/___graphql and putting in the following query:
{
allMarkdownRemark {
edges {
node {
frontmatter {
path
title
featuredImage {
name
absolutePath
}
}
}
}
}
}
Will work with commit 5c8db5 but with commit commit 7e5b75 it will fail with:
{
"errors": [
{
"message": "Field \"featuredImage\" must not have a selection since type \"String\" has no subfields.",
"locations": [
{
"line": 8,
"column": 27
}
]
}
]
}
The diff between the two commits is:
date: 2018-03-01T13:59:53.669Z
author: Suraj Jagtap
twitterHandle: surajdjagtap
-featuredImage: ../img/elemento.jpg
+featuredImage: ../img/lambo.jpg
description: 'Third sample article '
keywords: 'three, more'
---
Both of those files exist in the repo and seem like valid images. Anyone have any idea what's going on?
m-allanson
on 1 Mar 2018
elemento.jpg doesn't exist in commit which added this blog post ( https://github.com/jsuraj/Blog/tree/7e5b7523d0066b3814c43856c08c7406a6e095f7/src/pages/img ). If it doesn't exist and gatsby happen to pick this blog post as example value it will fail to infer local file and will fallback to string.
pieh
on 1 Mar 2018
Thanks @pieh, I should have spotted that!
@jsuraj, as @pieh said above - you have the images in /static/img, but your markdown file is looking for images in /src/pages/img.
m-allanson
on 2 Mar 2018
Yikes, my bad. I was looking at the wrong place. Thank you so much @m-allanson and @pieh for the suggestions.
jsuraj
on 2 Mar 2018
Glad you got it worked out! Is this issue ready to close, @jsuraj?
jlengstorf
on 2 Mar 2018
yes, it is worked out, the issue is ready to close.
jsuraj
on 2 Mar 2018
Great, thanks!
jlengstorf
on 2 Mar 2018
Weird, but what worked for me was to delete the whole folder that contained my articles and then bring them back with git.
giovannibenussi
on 22 Dec 2020
Related issues
signalwerk
·
3Comments
KyleAMathews
·
3Comments
ghost
·
3Comments
Oppenheimer1
·
3Comments
kalinchernev
·
3Comments
Most helpful comment
Yikes, my bad. I was looking at the wrong place. Thank you so much @m-allanson and @pieh for the suggestions.