Gatsby Image with Netlify CMS - Field "image" must not have a selection since type "String" has no subfields

Question

I'm building a blog site with Gatsby and I'm using Netlify CMS to manage my content. Each blog post has a featured image specified in the frontmatter.

But, I'm having some issues with getting those images to display. I keep getting this error:

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

I tried adding gatsby-remark-relative-images to try to fix this but that's not working - i still get the same error.

Any ideas on how to fix this?

Directory structure

content
 - articles
public
src
static
 - admin
 - images

Post Frontmatter

---
title: Post 1
image: img.png
---

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/static/images`,
    }
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `content`,
      path: `${__dirname}/content`,
    }
  },
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-relative-images`,
        },
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 590,
          },
        },
      ],
    },
  },
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,
  `gatsby-plugin-netlify-cms`,
  `gatsby-plugin-sitemap`
]

gatsby-node.js

const path = require('path');

const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');


exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)

  if (node.internal.type === `MarkdownRemark`) {

    const slug = createFilePath({ node, getNode, basePath: `pages` })

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = ({actions, graphql}) => {
  const {createPage} = actions;

  return graphql(`{
    allMarkdownRemark {
      edges {
        node {
          html
          id
          frontmatter {
            title
            date
            templateKey
          }
          fields {
            slug
          }
        }
      }
    }
  }`)
  .then(res => {
    if (res.errors) {
      return Promise.reject(res.errors);
    }

    res.data.allMarkdownRemark.edges.forEach(({node}) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve(
          `src/templates/${String(node.frontmatter.templateKey)}.js`
        ),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
          slug: node.fields.slug,
        },
      })
    })

  })
}

Answer 1

While thee answer from @issydennis may help. Make sure to triple check your image path and name, if the image that you set in your content definition doesn't match with an actual image Gatsby will prompt that error instead Image not found.

Answer 2

I followed this tutorial and succeed with latest versions of Gatsby and netlify. https://blog.rousek.name/2018/08/10/cool-image-loading-with-gatsbyjs-v2-and-netlify-cms-v2/. Basically you need to use gatsby-plugin-netlify-cms-paths. This will allow Graphql to be able to query the image because on Netlify, the image field is a type of string. A quotation from the author of the plugin said: "A gatsby plugin to change file paths in your markdown files to Gatsby-friendly paths when using Netlify CMS to edit them."

Alternatively, If you still prefer using gatsby-remark-relative-images, you need to add

// gatsby-node.js
 const { fmImagesToRelative } = require('gatsby-remark-relative-images');

  exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node);
  };

Answer 3

Try clearing the cache using:

gatsby clean

And then running the dev server again.

I often get this error randomly when working with the same setup as you. Clearing the cache and restarting usually fixes it.

Answer 4

Easiest to go straight to the Gatsby Documentation for gatsby-plugin-netlify-cms-paths

https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms-paths/

One caveat,... Your config.yml file should specify both a media_folder and a public_folder. However, according to the Netlify CMS documentation:

If public_folder is not set, Netlify CMS defaults to the same value as media_folder, adding an opening / if one is not included.

Letting Netlify CMS do its default thing, my initial Netlify build after installing and configuring the plugin failed with the following error:

error Missing public_folder in Netlify CMS config

Upon manually adding the public_folder to my config.yml file, I had no further problems.