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

Question

我通常有一个包含对象数组的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!，所有图像都会显示出来，但是一旦数组为空，构建就会中断。

Answer 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 而不是引发错误！