在 Gatsby 中允许可选的 GraphQL 数据答案

【问题标题】：Allow optional GraphQL data in Gatsby在 Gatsby 中允许可选的 GraphQL 数据
【发布时间】：2020-06-02 22:57:04
【问题描述】：

我正在尝试在我的gatsby-node.js 文件中构建一个支持可选值的类型。我认为这是通过[String!]! 完成的。

如何在home.js 上加载我在gatsby-node.js 中创建的新类型？

gatsby-node.js：

const path = require('path');
exports.createSchemaCustomization = ({ actions }) => {
    const { createTypes } = actions;
    const typeDefs = `
        type markdownRemark implements Node {
            frontmatter: Features
        }
        type Features {
            title: [String!]!
            description: [String!]!
        }
    `;
    createTypes(typeDefs);
};

pages/home/home.js:

export const query = graphql`
    query HomeQuery($path: String!) {
        markdownRemark(frontmatter: { path: { eq: $path } }) {
            html
            frontmatter {
                features {
                    title
                    description
                }
            }
        }
    }
`;

home.md:

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

这需要起作用，以便如果 home.md 的前面的 features 数组为空，那么 GraphQL 不会抛出错误。

请不要告诉我总是在数组中包含至少一个值，因为这不切实际，我的解决方案需要不支持数组中的值。

我花了两个小时在圈子里翻阅文档/问题，试图找到一个可行的解决方案，请有人救救我！

【问题讨论】：

标签： reactjs graphql gatsby yaml-front-matter

【解决方案1】：

来自GraphQL docs：

String! 表示该字段不可为空，这意味着 GraphQL 服务承诺在您查询该字段时始终为您提供一个值。 在类型语言中，我们将用感叹号表示那些。

[Episode!]! 表示 Episode 对象的数组。由于它也是不可为空的，因此当您查询该字段时，您总是可以期待一个数组（包含零个或多个项目）。由于Episode! 也是不可为空的，因此您始终可以期望数组中的每一项都是Episode 对象。

GraphQL 中的感叹号! 表示不可为空，所以[String!]! 表示存在非空字符串的非空数组。

如果您希望某个字段是可选的，请保持原样，不要使用感叹号!。比如[String]表示数组可以为null，或者里面的任意字符串值都可以为null。

我也不确定您是否首先要使用数组，因为功能的title 和description 肯定应该只是一个字符串？

根据Gatsby docs，我认为您正在寻找的是：

const typeDefs = `
    type markdownRemark implements Node {
        // Use custom frontmatter type
        frontmatter: Frontmatter
    }
    // Define custom frontmatter type
    type FrontMatter {
      // Nullable array of Feature elements
      features: [Feature]
    }
    // Feature has nullable fields title and description
    type Feature {
        title: String
        description: String
    }
`;

这意味着 frontmatter 有一个名为 features 的字段，该字段可以为 null（可选），如果确实存在，则为 Feature 对象的数组。它可以为空，但如果存在任何Feature 对象，则每个Feature 都有一个可为空的（可选）title 和description 字段。

【讨论】：