在 Gatsby 中允许可选的 GraphQL 数据

Posted

技术标签:

【中文标题】在 Gatsby 中允许可选的 GraphQL 数据【英文标题】:Allow optional GraphQL data in Gatsby 【发布时间】: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 不会抛出错误。

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

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

【问题讨论】:

【参考方案1】:

来自GraphQL docs:

String! 表示该字段不可为空,这意味着 GraphQL 服务承诺在您查询该字段时始终为您提供一个值。 在类型语言中,我们将用感叹号表示那些[Episode!]! 表示 Episode 对象的数组。由于它也是不可为空的,因此当您查询该字段时,您总是可以期待一个数组(包含零个或多个项目)。由于Episode! 也是不可为空的,因此您始终可以期望数组中的每一项都是Episode 对象。

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

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

我也不确定您是否首先要使用数组,因为功能的titledescription 肯定应该只是一个字符串?

根据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 都有一个可为空的(可选)titledescription 字段。

【讨论】:

以上是关于在 Gatsby 中允许可选的 GraphQL 数据的主要内容,如果未能解决你的问题,请参考以下文章

Gatsby:在 GraphQL 查询中允许不存在的字段

在 netlify cms 和 gatsby js 中使图像可选

Gatsby:graphql 查询中的 gatsby-source-graphql 和 gatsby-plugin-sharp

gatsby-source-graphql + ACF 字段未显示

如何在 Gatsby 中对 GraphQL 查询进行单元测试

如何在 graphQL 中获取 Gatsby 页面 HTML