10
votes

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
---
2
Could the error come from somewhere else, and not this file? Are you querying image field in graphql somewhere else? Or, is there a different in folder structure between your development branch and master branch?Derek Nguyen
Hi! Did you eventually get it resolved? Because I am facing the same problem now with netlify only throwing this error. My image links are just URL strings though, no actual files even.margarita

2 Answers

4
votes

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
        }
      }
    }
  }
`;
0
votes

try to add something with the plugin gastby-plugin-sharp.

something linke this:

export const galleryQuery = graphql`
  query Gallery($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
        grid {
          image {
            childImageSharp {
              fluid(maxWidth: 2048, quality: 100) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          band
        }
      }
    }
  }
`