13

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
---
G. Ball.
  • 169
  • 2
  • 9
  • 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 Feb 15 '19 at 06:39
  • 1
    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 Jan 07 '21 at 08:48

2 Answers2

4

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
        }
      }
    }
  }
`;
Scott Agirs
  • 599
  • 6
  • 14
  • Appreciate the answer, I'll give it a shot. The only thing is, is that in my config.yml file I just have the image listed as a field within my 'list' widget, but don't have any 'fields' associated with the image. Just {label: "Image", name: "image", widget: "image"}. And it compiles locally fine, that's what's so frustrating. – G. Ball. Feb 15 '19 at 05:08
  • 1
    do you have GraphQL playground available to you? or GraphiQL? – Scott Agirs Feb 16 '19 at 05:17
1

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
        }
      }
    }
  }
`
Pedro Moreno Chagas Ligeiro Na
  • 11
  • 1