DEV Community

Gatsby and Netlify CMS: First Impressions

Brian Barbour on May 14, 2019

For my sister's birthday, I decided to build her a fast, clean, and modern website using Gatsby. It is for her comic series, Saga of the Old Gods. ...

Read full post

Shawn Erquhart • May 14 '19

Awesome write up Brian, thanks for this! I work on Netlify CMS, and you're dead on - compatibility will be our next major focus, and Gatsby is up first. Stay tuned!

Brian Barbour • May 15 '19 • Edited

The devil is back again. Shawn, do you or anyone on your team know a good way to work around this, for now? I tried clearing my Gatsby cache and can send you min gatsby.config file if need be. This is prob the most frustrating part. Otherwise, I love using the CMS.

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

  file: /Users/brian/Dev/Projects/sotog/src/pages/chapters.js

  10 |           fields {
  11 |             slug
  12 |           }
  13 |           frontmatter {
  14 |             title
  15 |             date(formatString: "MMMM DD, YYYY")
  16 |             description
  17 |             pdf {
  18 |               relativePath
  19 |             }
> 20 |             cover {
     |                   ^
  21 |               childImageSharp {
  22 |                 fluid {
  23 |                   ...GatsbyImageSharpFluid
  24 |                 }
  25 |               }
  26 |             }
  27 |           }
  28 |         }
  29 |       }
  30 |     }

Andrew Beeken • Dec 17 '19

Hi Brian, thanks for this article! I'm just getting into Gatsby and Netlify myself with the aim of broadening my understanding of Jamstack - I've been fiddling with websites for 15 years now so it feels great to be working with something that's just building flat, fast pages again after over a decade of wrangling Wordpress!

I'm finding all the issues you did, however, and my current headache is the dreaded "xyz" must not have a selection... on the featured images I'm setting in the CMS - did you ever find a concrete way around this? The error is so vague and I've spent a couple of days now trying different solutions, cleaning my Gatsby cache and reading the same few articles on this over and over again! It's a real black spot on what is an excellent approach to site building and content management.

Brian Barbour • Dec 17 '19

I did end up fixing it, but it's been literal months since I worked on the project and forgot the exact details of what I did to fix it.

However, I will provide you my gatsby-config.js file and maybe that can help?

module.exports = {
  siteMetadata: {
    title: '',
    description: '',
  },
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `assets`,
        path: `${__dirname}/static/assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-plugin-netlify-cms-paths`,
            options: {
              cmsConfig: `/static/admin/config.yml`,
            },
          },
          {
            resolve: `gatsby-remark-relative-images`,
            option: {
              name: `assets`,
            },
          },
          {
            resolve: "gatsby-remark-images",
            options: {},
          },
        ],
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "chapters",
        path: `${__dirname}/content/chapters`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: `${__dirname}/content/pages`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: "posts",
        path: `${__dirname}/content/posts`,
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-netlify-cms`,
    "gatsby-plugin-netlify",
  ],
}```

Andrew Beeken • Dec 17 '19

Thank you so much! Unfortunately rejigging this hasn't helped so I feel that the problem is likely elsewhere, either in the frontmatter itself or how I'm building the pages. Ah well, I'm sure I'll reach a conclusion eventually!

Brian Barbour • Dec 17 '19

One thing I do remember clearly is needing to have all the fields in the frontmatter be there, or it would get weird.

s0ftwhere • May 14 '19

Hey Brian. Not sure what validation is used for the form (I’m on mobile and can’t inspect) but it doesn’t show any error messages if I submit without writing anything (no required fields).

I would also suggest to use at least 16px font size for the input field since otherwise IOS zooms in and it’s uncomfortable to type.

Brian Barbour • May 14 '19

Oh man! I forgot the required attributes. Good catch. Thank you!

Carson Gibbons • Jul 23 '19

Hi Brian, great read! I'd love to get your feedback on the Cosmic JS Headless CMS + Gatsby. We have examples available, including the newest post by Jacob Knaack on building an agency portfolio website using Gatsby + Cosmic JS.

Brian Barbour • Jul 23 '19

I'll have to take a look!

Andy Zhao (he/him) • May 16 '19

Thanks for the post! I've been playing around with Gatsby and Netlify CMS myself. Seems like it might be a good combination. Seeing it through your eyes is really helpful.

Brian Barbour • Nov 14 '19

Huh?

Josh • Aug 15 '19

"Seldom is it seamless."

True that. I feel like every time I start up gatsby develop, some plugin has broken. Other than that, Gatsby is awesome.