Поле Error GraphQL "изображение" типа "Файл" должно иметь выбор подполей. Вы имели в виду "image { ... }"?

Question

Я строю сайт с помощью Gatsby и Netlify CMS. Я использовал Gatsby Site Starter.

Я продолжаю получать изображение "Поле ошибки GraphQL" типа "Файл", должно иметь выбор подполей. Вы имели в виду "изображение {...}"? " ошибка при попытке развертывания в Netlify. На localhost все работает отлично, но с изображениями что-то не получается. Я посмотрел примеры, представленные на странице Netlify CMS, и нашел здесь человека с точно такой же настройкой, виджетом списка (действующим как галерея) с изображением и описанием внутри.

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 (файл шаблона)

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
---

Answer 1

Я не работал с Netlify CMS, но похоже, что ваше изображение может быть коллекцией с подполями (пример: image { source, id .. }, в этом случае вы должны переписать ваш запрос, подобный этому:

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

Answer 2

Попробуй добавить что-нибудь с помощью плагина gastby-plugin-sharp.

что-то связать это:

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
        }
      }
    }
  }
`