“文件”类型的 GraphQL 错误字段“图像”必须具有子字段选择。您的意思是“图像 ... ”吗？

Posted 2023-03-08

【中文标题】“文件”类型的 GraphQL 错误字段“图像”必须具有子字段选择。您的意思是“图像 ... ”吗？

【英文标题】：GraphQL Error Field "image" of type "File" must have a selection of subfields. Did you mean "image ... "?“文件”类型的 GraphQL 错误字段“图像”必须具有子字段选择。您的意思是“图像 ... ”吗？

【发布时间】：2019-07-09 01:47:36

【问题描述】：

我正在使用 gatsby 和 Netlify CMS 构建网站。我使用了 Gatsby Site Starter。

我不断收到“文件”类型的“GraphQL 错误字段“图像”必须有一个子字段选择。您的意思是“图像 ... ”吗？尝试部署到 Netlify 时出错。一切都在本地主机上完美运行，但图像似乎有些失败。我查看了 Netlify CMS 页面上提供的示例，发现有人具有完全相同的设置，一个列表小部件（充当画廊），里面有图像和描述，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（模板文件）

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

【问题讨论】：

错误可能来自其他地方，而不是这个文件？您是否在其他地方查询 graphql 中的 image 字段？或者，您的开发分支和master 分支之间的文件夹结构是否不同？

嗨！你最终解决了吗？因为我现在面临同样的问题，netlify 只抛出这个错误。我的图片链接只是 URL 字符串，甚至没有实际文件。

【参考方案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
        
      
    
  
`;

【讨论】：

欣赏答案，我会试一试。唯一的问题是，在我的 config.yml 文件中，我只是将图像列为“列表”小部件中的一个字段，但没有任何与该图像关联的“字段”。只需标签：“图像”，名称：“图像”，小部件：“图像”。而且它在本地编译得很好，这就是令人沮丧的地方。

您有可用的 GraphQL 游乐场吗？还是 GraphiQL？

【参考方案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
        
      
    
  
`