reactjs - 允许 Gatsby 中的可选 GraphQL 数据

Question

我正在尝试在我的 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 的 front Matter 内的 features 数组为空，那么 GraphQL 就不会抛出错误。

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

我花了两个小时浏览文档/问题，试图找到可行的解决方案，请有人救救我!

Answer 1

来自GraphQL docs :

• String! means that the field is non-nullable, meaning that the GraphQL service promises to always give you a value when you query this field. In the type language, we'll represent those with an exclamation mark.
• [Episode!]! represents an array of Episode objects. Since it is also non-nullable, you can always expect an array (with zero or more items) when you query the field. And since Episode! is also non-nullable, you can always expect every item of the array to be an Episode object.

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 都有一个可为 null(可选)的 title 和 description 字段。