GatsbyJS and Netlfiy string vs number in markdown - graphql

Question

I'm having trouble with a datetime field in gatsby.
Originally I just used the string widget in netlify cms but markdown couldn't seem to decide what is a number and what's a string:
Which means gatsby sees conflicting field types:
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'
So I explicitly define them with the createTypes action as per gatsby's suggestion:
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",
},
}
},
},
}),
But that produces either 00:00 or "Invalid date"
I use the netlify timepicker to set the values:
- { 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}
Is there a way I can force markdown to see strings instead of numbers? Or to see a datetime? Or get netlify cms to always save it as a string?

Answer 1

I have also had this problem and have discovered that the version of the YAML parser used by Gatsby (currently js-yaml#3.14.1) is parsing strings as base60 where possible. Which I believe is not compliant with the YAML 1.2 spec.
This issue has since been fixed in version 4 but unfortunately the libraries that Gatsby uses still depend on version 3. gatsby-transformer-remark#4.3.0 -> gray-matter#4.0.3 -> js-yaml#3.14.1
An attempt to force upgrade using npm-force-resolutions did not work but
fortunately gray-matter allow engines to be swapped using the options. Also gatsby-transformer-remark allows the gray-matter options to be configured within gatsby-config.js.
So I have managed to workaround the issue by installing js-yaml#4.1.0 and overriding the engine like so:
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)
+ }
},