GraphQL Error Field “image” of type “File” must have a selection of subfields. Did you mean “image { … }”?

Loading...

GraphQL Error Field “image” of type “File” must have a selection of subfields. Did you mean “image { … }”?

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 (



);
};

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

Solutions/Answers:

Solution 1:

I haven’t worked with Netlify CMS, but it looks like your Image might be a collection with subfields (example: image { source, id .. }, in which case you should rewrite your query similar to this:

export const galleryQuery = graphql `
  query Gallery($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
        grid {
          image { 
             id
             source
             ..
          }
          band
        }
      }
    }
  }
`;

References

Loading...