GatsbyJS Issue: type "String" has no subfields.

[ghost]

I am trying to create a blog about GatsbyJS. It should be a new part of my portfolio website.

To accomplish this task, I have created a template Post.js in the folder "components" which is inside "src". This is there to display all new blog articles about Markdown data on my website. Before I come to the point I give you a little insight into my Post.JS template:

import React from 'react'
import { Link } from 'gatsby'
import Img from 'gatsby-image'
const Post =({ title, path, date, body, fluid}) => {
    return(
        <div className="col-12 col-md-6 item">
        <div className="row card p-0 text-center">
          <div className="col-12 p-0">
            <div className="image-over">
              <Img fluid={fluid} className="card-img-top"/>
            </div>
            <div className="card-body">
              <Link to={path}>
                <h4>{title}</h4>
              </Link>
              <p>{body}</p>
            </div>
            <div className="card-footer d-lg-flex align-items-center justify-content-center">
    <Link to={path} className="d-lg-flex align-items-center"><i className="icon-clock" />{date}</Link>
            </div>
          </div>
        </div>
      </div>
    )
}
export default Post

This template reads data from Markdown data using Graphql. Such a Markdown file looks like this:

---
title: 'The Magic behind CSS'
date: 2020-04-22 07:00:00
path: '/TheMagicbehindCSS'
image: ../../images/bg-1.jpg
---

This is my fist post and if you can read this, the plugin wich converts this Markdown file to an GraphQL we won.`

And to make this work I have created and implemented the following Graphql.:

query blogquery {
    allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}) {
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MM YYYY")
            path
            image{
              childImageSharp{
                fluid{
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
          excerpt
        }
      }
    }
  }

The problem I'm having now is this:

There was an error in your GraphQL query:

Field "image" must not have a selection since type "String" has no subfields.

This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of type "String" make sure that your input source and/or plugin is correct.

File: E:/Windows10/Desktop/WebApp/src/pages/blog.js

I don't know what the problem is, can anyone help me?

Many thanks in advance!

[LekoArts]

Thank you for opening this!

The error means that Gatsby can't find a "File" at the path you provided in the frontmatter. Hence it only returns a String. The image query you do expected the image to be of the type File. You can achieve this by having the correct relative path in place and pointing the source-filesystem plugin to that directory. You can read more about this here: https://www.gatsbyjs.org/docs/working-with-images-in-markdown/#configuring-for-images-and-posts-in-different-directories

So make sure that you don't have a typo in the path and point the plugin to your images so that it can understand that images are there.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!