如何在graphql gatsby中允许可选的清晰图像？

Posted 2023-03-06

【中文标题】如何在graphql gatsby中允许可选的清晰图像？

【英文标题】：How to allow optional sharp image in graphql gatsby?

【发布时间】：2020-06-03 20:12:09

【问题描述】：

我通常有一个包含对象数组的frontmatter，每个对象内部都有一个图像，该图像将引用相对于markdown文件的文件字符串。

问题是，数组有时可能是空的，这意味着 graphql 必须通过将所有值设置为非 null 来计算架构是什么，我已经能够使用简单的类型来做到这一点，例如使用 Gatsby 的字符串createSchemaCustomization，但我希望能够声明一个引用图像的字符串以使用 Image Sharp（因此 gatsby-transformer-sharp 可以在组件接收之前压缩图像）。

在 Gatsby 文档或图像清晰插件的任何地方似乎都没有为此提供模式类型。

我尝试使用File! 作为一种在数组为空时有效的类型，但是当您实际尝试引用真实图像时，它只会返回 image: childImageSharp: null ，这意味着 gatsby-transformer-sharp 不会像在File! 没有声明。

以下是我的架构的声明方式：

exports.createSchemaCustomization = ( actions ) => 
    const  createTypes  = actions;
    const typeDefs = `
        type MarkdownRemark implements Node 
            frontmatter: Frontmatter
        
        type Frontmatter 
          features: [Feature!]!
        
        type Feature 
            title: String!
            description: String!
            image: File!
        
    `;

    createTypes(typeDefs);
;

这是我的 graphql 查询：

export const query = graphql`
    query HomeQuery($path: String!) 
        markdownRemark(frontmatter:  path:  eq: $path  ) 
            html
            frontmatter 
                features 
                    title
                    description
                    image 
                        childImageSharp 
                            fluid(maxWidth: 800) 
                                ...GatsbyImageSharpFluid
                            
                        
                    
                
            
        
    
`;

还有我的降价文件，它返回特征对象数组，image 是应该创建流体图像清晰对象的字符串。

---
path: '/'
features:
    - title: Barns
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-001.png
    - title: Private Events
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-002.png
    - title: Food and Drinks
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-003.png
    - title: Spa
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-004.png
---

作为概述，一旦我删除了createSchemaCustomization 上的File!，所有图像都会显示出来，但是一旦数组为空，构建就会中断。

【参考方案1】：

经过几个月的断断续续搜索，我设法解决了这个问题，我使用 File 类型是正确的，它在确实存在的图像上返回空的原因是我错过了特别的指令 @ 987654322@.

对于所有为此苦苦挣扎的人，您必须在 gatsby-node.js 中有一个名为 createShcemaCustomization 的导出函数，从这里您必须配置您想要提供非空值的 frontmatter 属性。

exports.createSchemaCustomization = ( actions, schema ) => 
    const  createTypes  = actions;

    const typeDefs = [
        `type MarkdownRemark implements Node 
            frontmatter: Frontmatter
        `,
        `type Frontmatter @infer 
            about_hero_slides: [File!]! @fileByRelativePath,
            about_title: String,
            about_text: String,
            about_images: [File!]! @fileByRelativePath,
        `,
    ];

    createTypes(typeDefs);
;

一旦我在 Frontmatter 类型上添加了 @infer 和 @fileByRelativePath 到每个 File 属性，它会立即解析任何图像，并且所有不存在的图像将简单地返回 null 而不是引发错误！

【讨论】：

您先生，真是个天才！ ?? 如果只有堆栈溢出有“买啤酒”按钮。