GraphQL Error Field "image" must not have a selection since type string has no subfields

[AlexandraVlasenko]

DESCRIPTION
1)GraphQL

2)Markdown

STEPS TO REPRODUCE

1)Install plugins: gatsby-transformer-sharp, gatsby-plugin-sharp, gatsby-image, gatsby-transformer-remark, gatsby-source-filesystem
2)Paste plugins into gatsby-config.js

3)Write query in GraphQL

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

ACTUAL RESULT

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

ENVIRONMENT

System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 8.10.0 - /usr/bin/node
npm: 3.5.2 - /usr/bin/npm
Languages:
Python: 2.7.15 - /usr/bin/python
Browsers:
Chrome: 71.0.3578.98
Firefox: 64.0
npmPackages:
gatsby: 2.0.93 => 2.0.93
gatsby-image: ^2.0.0-rc.4 => 2.0.0-rc.4
gatsby-plugin-favicon: ^3.1.4 => 3.1.5
gatsby-plugin-google-analytics: next => 2.0.0-rc.2
gatsby-plugin-lodash: ^3.0.3 => 3.0.3
gatsby-plugin-lunr: ^1.0.0 => 1.3.0
gatsby-plugin-netlify: 2.0.0-beta.5 => 2.0.0-beta.5
gatsby-plugin-netlify-cms: ^3.0.0 => 3.0.11
gatsby-plugin-offline: ^2.0.21 => 2.0.22
gatsby-plugin-react-helmet: next => 3.0.0-rc.1
gatsby-plugin-react-next: ^1.0.11 => 1.0.11
gatsby-plugin-robots-txt: ^1.2.0 => 1.4.0
gatsby-plugin-root-import: ^2.0.4 => 2.0.5
gatsby-plugin-sass: next => 2.0.0-rc.2
gatsby-plugin-sharp: ^2.0.19 => 2.0.19
gatsby-plugin-sitemap: next => 2.0.0-rc.2
gatsby-remark-typography: git+https://github.com/humanseelabs/gatsby-remark-typography.git => 1.0.0
gatsby-source-filesystem: ^2.0.1-rc.6 => 2.0.1-rc.6
gatsby-transformer-remark: ^2.1.1-rc.5 => 2.1.1-rc.5
gatsby-transformer-sharp: ^2.1.13 => 2.1.13
npmGlobalPackages:
gatsby-cli: 2.4.8

[krismorf]

Hi @AlexandraVlasenko check if #8195 fixes the issue for you. If not, please share reproduction code.

[AlexandraVlasenko]

Hi! It didn't worked. All images at our site dissappeared.
Gatsby-node.js

const path = require('path')
const { transliterate, slugify } = require('./src/utils/string')
// const { fmImagesToRelative } = require('gatsby-remark-relative-images')

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions
  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            id
            frontmatter {
              isPublished
              templateKey
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((error) => console.error(error.toString()))
      throw new Error(result.errors)
    }
    const edges = result.data.allMarkdownRemark.edges
    edges.forEach(({ node: { id, frontmatter: { templateKey, isPublished }, fields: { slug } } }) => {
      let url
      switch (templateKey) {
        case 'Interview1':
          if (!isPublished) return
          url = `post/${slug}`
          break
        case 'Interview2':
          if (!isPublished) return
          url = `post/${slug}`
          break
        case 'Interview3':
          if (!isPublished) return
          url = `post/${slug}`
          break
        case 'Masonry':
          if (!isPublished) return
          url = `post/${slug}`
          break
        case 'Tag':
          if (slug === 'empty') return
          url = `tag/${slug}`
          break
        case 'Home':
          url = '/'
          break
        case 'About':
          url = '/about'
          break
        case 'Advertising':
          url = '/advertising'
          break
        case 'Contacts':
          url = '/contacts'
          break
        case 'LegalInfo':
          url = '/legal-info'
          break
        case 'Journal':
          if (!isPublished) return
          url = `/journal/${slug}`
          break
        case 'JournalSet':
          url = `/journal-set/${slug}`
          break
        case 'Guide':
          if (!isPublished) return
          url = `guide/${slug}`
          break
        case 'Guides':
          url = `/guides`
          break
        default:
          break
      }
      if (url) {
        createPage({
          path: url,
          component: path.resolve(`src/templates/${String(templateKey)}.js`),
          context: {
            id,
          },
        })
      }
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  const { frontmatter } = node
  if (frontmatter) {
    const { image } = frontmatter
    if (image) {
      if (image.indexOf('/img') === 0) {
        frontmatter.image = path.relative(
          path.dirname(node.fileAbsolutePath),

          path.join( '/static/', image)
          
          

        )
        console.log( path.join( '/static/', image))
      }
    }
  }
  if (node.internal.type === 'MarkdownRemark') {
    const { title, publishDate } = node.frontmatter
    
    const slug = slugify(transliterate(title))
    createNodeField({
      name: 'slug',
      node,
      value: slug,
    })
  }
  // fmImagesToRelative(node)
}

exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-leaflet/,
            use: ['null-loader'],
          },
          {
            test: /leaflet/,
            use: ['null-loader'],
          },
        ],
      },
    })
  }
}

exports.onPreExtractQueries = ({ actions, getNodes, getNode }) => {
  const { createNodeField } = actions
  const postsOfTag = new Map()
  const postsOfJournal = new Map()
  const journalsOfJournalSet = new Map()
  const tagsOfPost = new Map()
  const postsOfGuide = new Map()
  const hotGuides = new Map()
  const coverPlaces = new Map()
  const markdownNodes = getNodes().filter((node) => node.internal.type === 'MarkdownRemark')
  const allTags = []
  const projectTagIds = []
  markdownNodes.forEach((node) => {
    switch (node.frontmatter.templateKey) {
      case 'Masonry':
      case 'Interview1':
      case 'Interview2':
      case 'Interview3': {
        const post = node
        if (!post.frontmatter.isPublished) break
        const tag = markdownNodes.find(
          ({ frontmatter: { templateKey, title } }) => templateKey === 'Tag' && title === post.frontmatter.mainTag,
        )
        if (tag) {
          createNodeField({
            node: post,
            name: 'mainTag',
            value: tag.id,
          })
          if (!postsOfTag.has(tag)) {
            postsOfTag.set(tag, [])
          }
          if (postsOfTag.get(tag).indexOf(post.id) === -1) {
            postsOfTag.get(tag).push(post.id)
          }
        }
        if (post.frontmatter.tags) {
          post.frontmatter.tags.forEach((item) => {
            const tag = markdownNodes.find(
              ({ frontmatter: { templateKey, title } }) => templateKey === 'Tag' && title === item.tag,
            )
            if (tag) {
              if (!tagsOfPost.has(post)) {
                tagsOfPost.set(post, [])
              }
              tagsOfPost.get(post).push(tag.id)
              if (!postsOfTag.has(tag)) {
                postsOfTag.set(tag, [])
              }
              if (postsOfTag.get(tag).indexOf(post.id) === -1) {
                postsOfTag.get(tag).push(post.id)
              }
            }
          })
        }
        break
      }
      case 'Project': {
        const project = node
        const projectTag = markdownNodes.find(
          ({ frontmatter: { templateKey, title } }) => templateKey === 'Tag' && title === project.frontmatter.tag,
        )
        if (projectTag) {
          createNodeField({
            node: project,
            name: 'tag',
            value: projectTag.id,
          })
          createNodeField({
            node: projectTag,
            name: 'project',
            value: project.id,
          })
          projectTagIds.push(projectTag.id)
        }
        break
      }
      case 'Journal': {
        const journal = node
        if (!journal.frontmatter.isPublished) break
        postsOfJournal.set(journal, [])
        if (journal.frontmatter.journalPosts) {
          journal.frontmatter.journalPosts.forEach((item) => {
            const journalPost = markdownNodes.find(
              ({ frontmatter: { templateKey, title } }) => templateKey === 'JournalPost' && title === item.journalPost,
            )
            if (journalPost) {
              createNodeField({
                node: journalPost,
                name: 'journal',
                value: journal.id,
              })
              postsOfJournal.get(journal).push(journalPost.id)
            }
          })
        }
        const journalSet = markdownNodes.find(
          ({ frontmatter: { templateKey, title } }) =>
            templateKey === 'JournalSet' && title === journal.frontmatter.journalSet,
        )
        if (journalSet) {
          createNodeField({
            node: journal,
            name: 'journalSet',
            value: journalSet.id,
          })
          if (!journalsOfJournalSet.has(journalSet)) {
            journalsOfJournalSet.set(journalSet, [])
          }
          journalsOfJournalSet.get(journalSet).push(journal.id)
        }
        break
      }
      case 'Guide': {
        const guide = node
        if (!guide.frontmatter.isPublished) break
        const guideTag = markdownNodes.find(
          ({ frontmatter: { templateKey, title } }) => templateKey === 'Tag' && title === guide.frontmatter.mainTag,
        )
        if (guideTag) {
          createNodeField({
            node: guide,
            name: 'mainTag',
            value: guideTag.id,
          })
        }
        if (guide.frontmatter.guidePosts) {
          guide.frontmatter.guidePosts.forEach((item) => {
            const guidePost = markdownNodes.find(
              ({ frontmatter: { templateKey, title } }) => templateKey === 'GuidePost' && title === item.guidePost,
            )
            if (guidePost) {
              createNodeField({
                node: guidePost,
                name: 'guide',
                value: guide.id,
              })
              if (!postsOfGuide.has(guide)) {
                postsOfGuide.set(guide, [])
              }
              postsOfGuide.get(guide).push(guidePost.id)
            }
          })
        }
        break
      }
      case 'CoverPlace': {
        const coverPlace = node
        const coverPlaceProject = markdownNodes.find(
          ({ frontmatter: { templateKey, title } }) =>
            templateKey === 'Project' && title === coverPlace.frontmatter.project,
        )
        if (coverPlaceProject) {
          createNodeField({
            node: coverPlace,
            name: 'project',
            value: coverPlaceProject.id,
          })
        }
        break
      }
      case 'Home': {
        const home = node
        const homeProject = markdownNodes.find(
          ({ frontmatter: { templateKey, title } }) =>
            templateKey === 'Project' && title === home.frontmatter.mainCoversBlock.project,
        )
        if (homeProject) {
          createNodeField({
            node: home,
            name: 'project',
            value: homeProject.id,
          })
        }
        const homeJournal = markdownNodes.find(
          ({ frontmatter: { templateKey, title, isPublished } }) =>
            templateKey === 'Journal' && title === home.frontmatter.mainCoversBlock.journal && isPublished,
        )
        if (homeJournal) {
          createNodeField({
            node: home,
            name: 'journal',
            value: homeJournal.id,
          })
        }
        const guidesPage = markdownNodes.find(({ frontmatter: { path } }) => path === '/guides')
        if (guidesPage) {
          createNodeField({
            node: home,
            name: 'guidesPage',
            value: guidesPage,
          })
        }
        if (home.frontmatter.mainCoversBlock.hotGuides) {
          home.frontmatter.mainCoversBlock.hotGuides.forEach((item) => {
            const hotGuide = markdownNodes.find(
              ({ frontmatter: { templateKey, title, isPublished } }) =>
                templateKey === 'Guide' && title === item.guide && isPublished,
            )
            if (hotGuide) {
              if (!hotGuides.has(home)) {
                hotGuides.set(home, [])
              }
              hotGuides.get(home).push(hotGuide.id)
            }
          })
        }
        if (home.frontmatter.coverPlaces) {
          home.frontmatter.coverPlaces.forEach((item) => {
            const coverPlace = markdownNodes.find(
              ({ frontmatter: { templateKey, title } }) => templateKey === 'CoverPlace' && title === item.coverPlace,
            )
            if (coverPlace) {
              if (!coverPlaces.has(home)) {
                coverPlaces.set(home, [])
              }
              coverPlaces.get(home).push(coverPlace.id)
            }
          })
        }
        break
      }
      case 'Tag': {
        const tag = node
        allTags.push(tag)
        break
      }
      default: {
        break
      }
    }
  })
  const notEmptyTags = []
  postsOfTag.forEach((postIds, tag) => {
    notEmptyTags.push(tag)
    createNodeField({
      node: tag,
      name: 'posts',
      value: postIds,
    })
  })
  allTags.forEach((tag) => {
    if (notEmptyTags.find((item) => item === tag)) return
    createNodeField({
      node: tag,
      name: 'isEmpty',
      value: true,
    })
    createNodeField({
      node: tag,
      name: 'posts',
      value: [],
    })
  })
  tagsOfPost.forEach((tagIds, post) => {
    createNodeField({
      node: post,
      name: 'tags',
      value: tagIds,
    })
    if (_.intersection(projectTagIds, tagIds).length > 0) {
      createNodeField({
        node: post,
        name: 'isProjectPost',
        value: true,
      })
    }
  })
  postsOfJournal.forEach((journalPostIds, journal) => {
    createNodeField({
      node: journal,
      name: 'journalPosts',
      value: journalPostIds,
    })
  })
  journalsOfJournalSet.forEach((journalIds, journalSet) => {
    createNodeField({
      node: journalSet,
      name: 'journals',
      value: journalIds,
    })
  })
  postsOfGuide.forEach((guidePostIds, guide) => {
    createNodeField({
      node: guide,
      name: 'guidePosts',
      value: guidePostIds,
    })
  })
  hotGuides.forEach((hotGuideIds, home) => {
    createNodeField({
      node: home,
      name: 'hotGuides',
      value: hotGuideIds,
    })
  })
  coverPlaces.forEach((coverPlaceIds, home) => {
    createNodeField({
      node: home,
      name: 'coverPlaces',
      value: coverPlaceIds,
    })
  })
}

This is a path to image:

Can it be because we used this gatsby-plugin-root-import?
Thank you!

[jonniebigodes]

Closing this issue as it's a duplicate of #11534. If you don't mind, check the answer there

[likarajo]

Add the following in gatsby-config.js

{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: "gatsby-remark-normalize-paths",
options: {
pathFields: ["cover"],
},
}
]
}
}