Using images from netlifyCMS - been stuck on this for 4 days.

[austinmdem]

Hello

I'm trying to add a blog page to an existing Gatsby site using NetlifyCMS. Basically, I'm getting the common:

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

I really want this to work, but I feel my work is wanting to go another direction as we've been stuck on this for a week. Any help is much appreciated, I've tried almost every solution I can find so I'm hoping there is a mistake in my files.

Here are my files:

config.yml

  name: github
  branch: development
  repo: [removed for work reasons]

media_folder: static/img
public_folder: /img

collections:
  - name: blog
    label: Blog
    folder: src/posts
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: description, label: Description }
      - { name: image, label: Image, widget: image }
      - { name: body, label: Body, widget: markdown }

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `removed for work reasons`,
    description: `removed for work reasons`,
    author: `removed`,
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-remove-serviceworker`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `uploads`,
        path: `${__dirname}/static/img`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/posts`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-relative-images",
            options: {
              name: "uploads",
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/,
        },
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-netlify`,
  ],
}

gatsby-node.js

const path = require('path')

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

    if (node.internal.type === "MarkdownRemark") {
        const slug = path.basename(node.fileAbsolutePath, '.md')

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

module.exports.createPages = async ({ graphql, actions}) => {
    const { createPage } = actions
    const blogTemplate = path.resolve('./src/templates/blog.js')
    const res = await graphql(`
        query {
            allMarkdownRemark {
                edges {
                    node {
                        fields {
                            slug
                        }
                    }
                }
            }
        }
    `)

    res.data.allMarkdownRemark.edges.forEach((edge) => {
        createPage({
            component: blogTemplate,
            path: `/blog/${edge.node.fields.slug}`,
            context: {
                slug: edge.node.fields.slug
            }
        })
    })
}

pages/blog.js (displays all blog posts)

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"

import Layout from "../components/layout/layout"

import Img from 'gatsby-image'

const Blog = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              title
              date
              image {
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  return (
    <>
      <Layout>
        <main className="main">
          <div className="articles">
            <h1 className="articles__title">Articles</h1>
            <section className="articles__list">
              {data.allMarkdownRemark.edges.map(edge => {
                return (
                  <a className="articles__article">
                    <div className="articles__article-artwork">
                      <figure className="articles__article-artwork-wrapper">
                      <Img fluid={edge.node.frontmatter.image.childImageSharp.fluid} />
                      </figure>
                    </div>
                    <h2 className="articles__article-title">
                      <Link to={`/blog/${edge.node.fields.slug}`}>
                        {edge.node.frontmatter.title}
                      </Link>
                    </h2>
                    <Link>
                      <p>{edge.node.frontmatter.date}</p>
                    </Link>
                    <div className="articles__article-description">
                      <p></p>
                    </div>
                    <span className="articles__article-more">Read more...</span>
                  </a>
                )
              })}
            </section>
          </div>
        </main>
      </Layout>
    </>
  )
}
export default Blog

templates/blog.js

import { graphql } from "gatsby"

import Layout from "../components/layout/layout"

import Img from 'gatsby-image'

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
      html
    }
  }
`

const Blog = props => {
  return (
    <Layout>
      <main className="main">
        <div className="article-page">
          <header className="article-page__header">
            <div className="article-page__header-inner">
              <h1 className="article-page__title">
              </h1>
            </div>
       
          <Img fluid={props.data.markdownRemark.frontmatter.image.childImageSharp.fluid} />
          </header>
          <p>{props.data.markdownRemark.frontmatter.date}</p>
          <section className="article-page">
            <div className="articles-page__inner">
              <div
                className="article-page__content"
                dangerouslySetInnerHTML={{
                  __html: props.data.markdownRemark.html,
                }}
              ></div>
            </div>
          </section>
        </div>
      </main>
    </Layout>
  )
}

export default Blog

Here is a picture of graphQL for what its worth

I know this is a lot to look at, so I really appreciate if someone can take the time to help me out.

Thanks!

[sidharthachatterjee]

Have you tried using gatsby-remark-relative-images? From what I can see, it appears that images aren't being transformed by gatsby-transformer-sharp?

[austinmdem]

Thanks! Yea I just scrapped everything and restarted and now everything is working. Thanks for the input!