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

Question

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

问题是，数组有时可能是空的，这意味着 graphql 必须通过将所有值设置为非空来确定架构是什么，我已经能够使用 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
---

作为概述，当我删除File!的createSchemaCustomization所有图像显示出来，但由于数组是空的构建将尽快打破。

Answer 1

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

对于所有为此苦苦挣扎的人，您的 中必须有一个名为 createShcemaCustomization 的导出函数gatsby-node.js，从这里您必须配置要提供非空值的 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);
};

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