I am building a site with gatsby and Netlify CMS. I used the Gatsby Site Starter.
I keep getting a "GraphQL Error Field "image" of type "File" must have a selection of subfields. Did you mean "image { ... }"?" error when trying to deploy to Netlify. Everything works perfectly on localhost, but something seems to be failing with the images. I've looked at the examples provided on the Netlify CMS page and found someone with the exact same setup, a list widget (acting as a gallery) with an image and description inside, here.
config.yml
backend:
name: git-gateway
repo: grantballmer/gatsby-starter-netlify-cms
branch: master
media_folder: static/img
public_folder: /img
collections:
- name: "gallery"
label: "Gallery"
folder: "src/pages/services"
create: true
fields:
- { label: "Template Key", name: "templateKey", widget: "hidden", default: "gallery" }
- {label: "Title", name: "title", widget: "string"}
- label: "Grid"
name: "grid"
widget: "list"
fields:
- {label: "Image", name: "image", widget: "image"}
- {label: "Band Name", name: "band", widget: "string"}`
gallery.js (template file)
import React from 'react';
import { graphql } from 'gatsby';
import Layout from "../components/Layout";
import PhotoGrid from "../components/services/PhotoGrid";
const GalleryTemplate = ({ data }) => {
const { markdownRemark: gallery } = data;
const images = gallery.frontmatter.grid;
return (
<Layout>
<PhotoGrid images={images} />
</Layout>
);
};
export default GalleryTemplate;
export const galleryQuery = graphql `
query Gallery($id: String!) {
markdownRemark(id: { eq: $id }) {
html
frontmatter {
title
grid {
image
band
}
}
}
}
`;
/services/photography.md
---
templateKey: 'gallery'
title: photography
grid:
- band: chris-cordle
image: /img/chris-cordle-lg.jpg
- band: 'chirp '
image: /img/chirp-lg-1-.jpg
---
image
field in graphql somewhere else? Or, is there a different in folder structure between your development branch andmaster
branch? – Derek Nguyen