6

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

问题是，数组有时可能是空的，这意味着 graphql 必须通过将所有值设置为非空来计算架构是什么，我已经能够使用简单类型（例如使用 Gatsby's 的字符串）来做到这一点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

4

1 回答 1

14

经过几个月的断断续续的搜索，我设法解决了这个问题，我使用File类型是正确的，它在确实存在的图像上返回空的原因是我错过了 ever-special 指令@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 而不是抛出错误！

于 2020-04-06T13:47:23.830 回答