在 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。
我也不确定您是否首先要使用数组,因为功能的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
字段。
【讨论】:
以上是关于在 Gatsby 中允许可选的 GraphQL 数据的主要内容,如果未能解决你的问题,请参考以下文章
在 netlify cms 和 gatsby js 中使图像可选
Gatsby:graphql 查询中的 gatsby-source-graphql 和 gatsby-plugin-sharp
gatsby-source-graphql + ACF 字段未显示