Gatsby: Field "image" must not have a selection since type string has no subfields

[KatePavlovich]

DESCRIPTION:

Part of our project for reproducing the problem
REPO

STEPS TO REPRODUCE

1)Clone and open the project
2)Use graphql for writing that query

EXPECTED RESULT
Excpectd to see childImageSharp in Image like this but insted got a mistake

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          image {
            childImageSharp
          }
      }
    }
  }
}
}

ENVIRONMENT

  System:
    OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 8.15.0 - /usr/bin/node
    Yarn: 1.12.3 - /usr/bin/yarn
    npm: 6.7.0 - /usr/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
  npmPackages:
    gatsby: 2.0.106 => 2.0.106
    gatsby-image: ^2.0.29 => 2.0.29
    gatsby-plugin-favicon: ^3.1.4 => 3.1.4
    gatsby-plugin-google-analytics: next => 2.0.0-rc.0
    gatsby-plugin-lodash: ^3.0.3 => 3.0.3
    gatsby-plugin-lunr: ^1.0.0 => 1.0.0
    gatsby-plugin-netlify: 2.0.0-beta.5 => 2.0.0-beta.5
    gatsby-plugin-netlify-cms: ^3.0.0 => 3.0.3
    gatsby-plugin-offline: ^2.0.22 => 2.0.22
    gatsby-plugin-react-helmet: next => 3.0.0-rc.0
    gatsby-plugin-react-next: ^1.0.11 => 1.0.11
    gatsby-plugin-robots-txt: ^1.2.0 => 1.3.0
    gatsby-plugin-root-import: ^2.0.4 => 2.0.5
    gatsby-plugin-sass: next => 2.0.0-rc.0
    gatsby-plugin-sharp: ^2.0.20 => 2.0.20
    gatsby-plugin-sitemap: next => 2.0.0-rc.0
    gatsby-remark-typography: git+https://github.com/humanseelabs/gatsby-remark-typography.git => 1.0.0
    gatsby-source-filesystem: ^2.0.20 => 2.0.20
    gatsby-transformer-remark: ^2.2.3 => 2.2.3
    gatsby-transformer-sharp: ^2.1.13 => 2.1.13
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[jonniebigodes]

@KatePavlovich i've picked up on your issue. Cloning your repo as we speak. Let me see if i can solve your issue. Also looking at the code it seems that this is a duplicate of #11412

[sidharthachatterjee]

@KatePavlovich You need to add the gatsby-remark-images and ensure that urls to images are relative to the markdown directory

Check out https://github.com/gatsbyjs/gatsby/issues/5298#issuecomment-386842853

[jonniebigodes]

@sidharthachatterjee that's only part of the solution. I picked up on it and saw that the dependency was missing. Issuing gatsby develop, opening up http://localhost:8000/___graphql with the query:

{
  allMarkdownRemark{
    edges{
      node{
        frontmatter{
          title

        }
      }
    }
  }
}

typing image, triggered the issue. Ctrl+space to check the if the image item was there. It wasn't.
It looks like your issue is somewhere else.
EDIT: Now it's showing. looks like for some reason the public and cache folders were commited and triggering the command did not update it.

[jonniebigodes]

@KatePavlovich copied over the files from the public to the imgs folder, installed the missing dependency and adjusted gatsby-config.js file accordingly and it will show you the images. Also Removed the duplicate entry in gatsby-config.js for gatsby-transformer-remark as it was throwing some issues and it's working as you want.

[KatePavlovich]

@jonniebigodes, we did everything you've said, but it didn't work. Maybe we are doing something wrong, but have no idea what exactly.
REPO

[jonniebigodes]

@KatePavlovich sorry for the hasty response the other day. I'm going to elaborate on what i meant to say using a smaller example so that you can see what the problem is and try to find a solution for it.
Going to break it into smaller parts so that it will be better undestood.

• Cloned the started blog template created by Gatsby config.
• As the packages needed were already there there's no need to install them.
• Copied over some image files i had laying around in a old wallpaper folder laying around, to the imgs/static folder in order to replicate your structure.
  As you can see bellow
  
• Added a markdown field to match yours to every content like you can see bellow:

...
  image: "../img/49534_1251087275_large.jpg"

• Issued gatsby develop opened up http://localhost:8000/___graphql
  Created the query:

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          image{

          }
        }
      }
    }
  }
}

And i'm presented with this:

• With the documentation opened on right side, you can see that the image property is picked up as a string. I thought, ok i've made a mistake somewhere, tried adjusting the paths, same result.
  Moved the folders to the assets folder as it's being picked up through gatsby-config.js like so:

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: `Kyle Mathews`,
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
    social: {
      twitter: `kylemathews`,
    },
  },
  plugins: [
.......
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
.....

• Stopped Gatsby and cleaned the .cache and public folder, so that the images can be picked up all nice with re-issuing gatsby develop and they were, but the same problem persisted.
  Fiddled with the paths once more, same outcome.
• Then it hit me. let me just move the images closer to the markdown files and see what graphiql and the documentation throws. So now the structure looks like so:
  
• Opened a new browser window to http://localhost:8000/___graphql and now the query works. Checking the documentation on the right side, image is now a File instead of a string as you can see bellow:
  

What this means is that when the markdown/ images are siblings, the plugin picks them up and treats them as a File and they can be manipulated as needed, otherwise, being one level above it's treated as a string path. I don't know if that's a problem with the library or the way it was supposed to be. I'll leave that to more knowledgeable people. Regarding your issue, you have two options:

1. You move the files closer, which it means that alot of repetitions and a cumbersome structure from what i've seen from the repo.
2. You'll have to adjust the necessary graphql queries, for instance in the templates so that the what is the image path can be resolved to a file and then use gatsby-image fine. Probably here can point you in the right direction.

I would like to say once more, sorry for the hasty response the other day and that i could not be more helpful

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[hvitis]

Hey, Exactly that is what has helped me. Moving draft, .md, text files away from posts-like structure (folder of folders with 1 .md and 1 picture)