GatsbyJS 和 Netlfiy 字符串与降价中的数字答案

【问题标题】：GatsbyJS and Netlfiy string vs number in markdownGatsbyJS 和 Netlfiy 字符串与降价中的数字
【发布时间】：2021-02-11 20:11:30
【问题描述】：

我在 gatsby 中遇到了日期时间字段问题。

最初我只是在 netlify cms 中使用了字符串小部件，但 markdown 似乎无法确定什么是数字，什么是字符串：

这意味着 gatsby 看到了冲突的字段类型：

warn There are conflicting field types in your data.
MarkdownRemark.frontmatter.startTime:
 - type: number
   value: 1080
 - type: string
   value: '07:00'
MarkdownRemark.frontmatter.endTime:
 - type: number
   value: 1140
 - type: string
   value: '08:00'

所以我按照 gatsby 的建议使用 createTypes 操作明确定义它们：

schema.buildObjectType({
            name: 'Frontmatter',
            fields: {
                startTime: {
                    type: 'Date',
                    // resolve(parent){
                    //     console.log(parent.startTime);
                    // }, 
                    extensions: {
                        dateformat: {
                            formatString: "HH:mm",
                        },
                    },
                },
                endTime: {
                    type: 'Date',
                    extensions: {
                        dateformat: {
                            formatString: "HH:mm",
                        },
                    }
                },
            },
        }),

但这会产生00:00 或"Invalid date"

我使用 netlify 时间选择器来设置值：

- { label: "Start Time", name: startTime, widget: datetime, date_format: false, time_format: HH:mm, format: HH:mm}
      - { label: "End Time", name: endTime, widget: datetime, date_format: false, time_format: HH:mm, format: HH:mm}

有没有办法强制markdown查看字符串而不是数字？或者查看日期时间？还是让 netlify cms 始终将其保存为字符串？

【问题讨论】：

标签： graphql markdown gatsby netlify

【解决方案1】：

我也遇到过这个问题，发现 Gatsby 使用的 YAML 解析器版本（当前为 js-yaml@3.14.1）正在尽可能将字符串解析为 base60。我认为这不符合 YAML 1.2 规范。

这个问题有since been fixed in version 4，但不幸的是，Gatsby 使用的库仍然依赖于版本 3。gatsby-transformer-remark@4.3.0 -> gray-matter@4.0.3 -> js-yaml@3.14.1

使用npm-force-resolutions 强制升级的尝试无效，但幸运的是gray-matter allow engines to be swapped using the options。 gatsby-transformer-remark 还允许在 gatsby-config.js 中配置灰度选项。

所以我设法通过安装 js-yaml@4.1.0 并像这样覆盖引擎来解决这个问题：

package.json

{
...
  "dependencies": {
+    "js-yaml": "4.1.0",

gatsby-config.js

+ const yaml = require('js-yaml');
...
    {
      resolve: "gatsby-transformer-remark",
      options: {
+        engines: {
+          yaml: {
+            parse: yaml.load.bind(yaml),
+            stringify: yaml.dump.bind(yaml)
+          }
        },

【讨论】：