I'm using Gatsby and Netlify CMS for an image upload. I'm using the image widget and when I upload an image to the media library, my Gatsby site works fine. However, if I change the image to a URL string of an existing image, my Gatsby page query breaks:
Field "featureImage" must not have a selection since type "String" has no
subfields.
I suspect this is obviously because my graphQL query was set up to expect an image file, and I've changed that file to a string in the CMS. Is there a way to make this implementation dynamic? Here's the relevant code:
PAGE QUERY IN TEMPLATE COMPONENT
export const pageQuery = graphql`
query IndexPageTemplate {
markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
frontmatter {
featureImage {
childImageSharp {
fluid(maxWidth: 2048, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
instagram
twitter
facebook
email
}
}
}
`
GATSBY NODE FOR RELATIVE PATH IMAGES
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
fmImagesToRelative(node) // convert image paths for gatsby images
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
There's a lack of details in the answer since it's a very general issue and needs debugging. My 2 cents:
Check the path of the filesystem in your
gatsby-node.js
: Gatsby needs to know where are those assets stored in your project in order to create the proper GraphQL nodes using its transformers and sharps. For example:Check the paths, naming, extensions of everything involved (images, folders, etc).
Check your
media_folder
andpublic_folder
folder. They should look like:Notice the missing slash in
media_folder
at the beginning.Check the plugin's order. All your filesystem needs to be set above the remark plugins.
Use
gatsby-remark-relative-images-v2
to create relative paths for assets: