gatsby: GraphQL, allFile or file queries that work in gatsby develop don't work in gatsby serve
EDIT
What I see is that what is not working are the queries that look for files (allFile and file queries), while they work when under gatsby develop they don’t retrieve the content when under gatsby build => serve.
So what does it mean? allFile and file are sort-of forbidden queries? Or have I to modify them somethow?
Summary
While in develop everything works, in serve the images are not showing up
Relevant information
I’m using gatsby-images, where I have access to images through graphQL, and then try to insert a simple <Img /> that works when developing, but not when serving. Don’t know what can happen, I post below everything that might be relevant
Relevant code
in a page
<Img fluid={images[1].node.childImageSharp.fluid} />
where images comes from
const images = data.AllPostImages.edges
with
export const blogListQuery = graphql`
query {
AllPostImages: allFile(filter: { extension: { eq: "jpg" } }) {
edges {
node {
name
childImageSharp {
fluid(maxWidth: 1000) {
originalName
src
srcSet
aspectRatio
sizes
}
}
}
}
}
}
`
When in developing, in Chrome
<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;">
<div style="width: 100%; padding-bottom: 133.333%;"></div>
<picture>
<source
srcset="/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg 250w,
/static/94a22e88a6c9752d10934873df16b1f5/06f71/name.jpg 500w,
/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg 1000w,
/static/94a22e88a6c9752d10934873df16b1f5/686ef/name.jpg 1500w,
/static/94a22e88a6c9752d10934873df16b1f5/fe260/name.jpg 2000w,
/static/94a22e88a6c9752d10934873df16b1f5/6f375/name.jpg 2736w"
sizes="(max-width: 1000px) 100vw, 1000px">
<img
src="/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: none 0s ease 0s;">
</picture>
<noscript>
<picture>
<source
srcSet="/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg 250w,
/static/94a22e88a6c9752d10934873df16b1f5/06f71/name.jpg 500w,
/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg 1000w,
/static/94a22e88a6c9752d10934873df16b1f5/686ef/name.jpg 1500w,
/static/94a22e88a6c9752d10934873df16b1f5/fe260/name.jpg 2000w,
/static/94a22e88a6c9752d10934873df16b1f5/6f375/name.jpg 2736w"
sizes="(max-width: 1000px) 100vw, 1000px" />
<img src="/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg"
style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/>
</picture>
</noscript>
</div>
And when in (building &) serving, in Chrome
<div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden">
<div style="width:100%;padding-bottom:133.33333333333334%"></div>
<noscript>
<picture>
<source
srcSet="/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg 250w,
/static/94a22e88a6c9752d10934873df16b1f5/06f71/name.jpg 500w,
/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg 1000w,
/static/94a22e88a6c9752d10934873df16b1f5/686ef/name.jpg 1500w,
/static/94a22e88a6c9752d10934873df16b1f5/fe260/name.jpg 2000w,
/static/94a22e88a6c9752d10934873df16b1f5/6f375/name.jpg 2736w"
sizes="(max-width: 1000px) 100vw, 1000px" />
<img src="/static/94a22e88a6c9752d10934873df16b1f5/1a92f/tecnica_latte_art_corazon.jpg"
style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/>
</picture>
</noscript>
</div>
while I can phisically find in the explorer e.g. /public/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg
package.json
"dependencies": {
"esm": "^3.2.5",
"gatsby": "^2.1.4",
"gatsby-image": "^2.0.29",
"gatsby-plugin-google-analytics": "^2.0.14",
"gatsby-plugin-manifest": "^2.0.17",
"gatsby-plugin-offline": "^2.0.23",
"gatsby-plugin-react-helmet": "^3.0.6",
"gatsby-plugin-sharp": "^2.0.20",
"gatsby-plugin-styled-components": "^3.0.5",
"gatsby-source-filesystem": "^2.0.20",
"gatsby-source-graphql": "^2.0.10",
"gatsby-transformer-sharp": "^2.1.13",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-helmet": "^5.2.0",
"react-share": "^2.4.0",
"rehype-raw": "^4.0.0",
"rehype-stringify": "^5.0.0",
"remark-bracketed-spans": "^3.0.0",
"remark-extract-frontmatter": "^2.0.0",
"remark-frontmatter": "^1.3.1",
"remark-parse": "^6.0.3",
"remark-parse-yaml": "0.0.2",
"remark-rehype": "^4.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.85.0",
"styled-components": "^4.1.3",
"unified": "^7.1.0"
},
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 16 (3 by maintainers)
@leworking i’ve picked up on your issue. I’ve tried to reproduce it and breaking into smaller steps:
gatsby-config.jsinto the following:src/pages\index.jsto reflect your issue, transforming it into:gatsby build && gatsby serveresulted in the following: The console.log output:And
If you don’t mind, create a repository with the bare minimum information that emulates this issue and share the link here, so it can be looked at in greater detail. If the contents is private or otherwise protected, just replace it with some dummy images and for any content that is coming from
gatsby-source-graphql, just mock the the createPages data that is provided insidegatsby-node.js.EDIT: Regarding your edit, those queries should be used when and if possible. They are not forbidden in any of the cases! And no modifications whatsoever needed
@leworking closing this issue! Feel free to open a new one, should new issues arise. And no need to thank, glad i could help even if a little.