Serialize date objects in markdown frontmatter to avoid type mismatch…

…es when inferring GraphQL types (#2163) * Serialize date objects in markdown frontmatter to avoid type mismatches when inferring GraphQL types fixes #2096 * Fix test
gatsbyjs · Sep 18, 2017 · 59bd99a · 59bd99a
1 parent 5f73f7e
commit 59bd99a
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 21 deletions.
diff --git a/packages/gatsby-transformer-remark/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-transformer-remark/src/__tests__/__snapshots__/gatsby-node.js.snap
@@ -6,20 +6,20 @@ Array [
     Object {
       "children": Array [],
       "frontmatter": Object {
-        "date": "12/12/2014",
+        "date": "2017-09-18T23:19:51.246Z",
         "parent": "whatever",
         "title": "my little pony",
       },
       "id": "whatever >>> MarkdownRemark",
       "internal": Object {
         "content": "---
 title: \\"my little pony\\"
-date: \\"12/12/2014\\"
+date: \\"2017-09-18T23:19:51.246Z\\"
 ---
 
 Where oh where is my little pony?
     ",
-        "contentDigest": "54cfa2ad99756f2fa232cac585280a37",
+        "contentDigest": "1235e2d6fdcadd5f09bf4c221bdf9094",
         "type": "MarkdownRemark",
       },
       "parent": "whatever",
@@ -35,20 +35,20 @@ Array [
       "child": Object {
         "children": Array [],
         "frontmatter": Object {
-          "date": "12/12/2014",
+          "date": "2017-09-18T23:19:51.246Z",
           "parent": "whatever",
           "title": "my little pony",
         },
         "id": "whatever >>> MarkdownRemark",
         "internal": Object {
           "content": "---
 title: \\"my little pony\\"
-date: \\"12/12/2014\\"
+date: \\"2017-09-18T23:19:51.246Z\\"
 ---
 
 Where oh where is my little pony?
     ",
-          "contentDigest": "54cfa2ad99756f2fa232cac585280a37",
+          "contentDigest": "1235e2d6fdcadd5f09bf4c221bdf9094",
           "type": "MarkdownRemark",
         },
         "parent": "whatever",
@@ -57,7 +57,7 @@ Where oh where is my little pony?
         "children": Array [],
         "content": "---
 title: \\"my little pony\\"
-date: \\"12/12/2014\\"
+date: \\"2017-09-18T23:19:51.246Z\\"
 ---
 
 Where oh where is my little pony?

diff --git a/packages/gatsby-transformer-remark/src/__tests__/gatsby-node.js b/packages/gatsby-transformer-remark/src/__tests__/gatsby-node.js
@@ -1,4 +1,5 @@
 const Promise = require(`bluebird`)
+const _ = require(`lodash`)
 
 const { onCreateNode } = require(`../gatsby-node`)
 
@@ -18,7 +19,7 @@ describe(`Process markdown content correctly`, () => {
   it(`Correctly creates a new MarkdownRemark node`, async () => {
     const content = `---
 title: "my little pony"
-date: "12/12/2014"
+date: "2017-09-18T23:19:51.246Z"
 ---
 
 Where oh where is my little pony?
@@ -35,6 +36,9 @@ Where oh where is my little pony?
       boundActionCreators,
     }).then(() => {
       expect(createNode.mock.calls).toMatchSnapshot()
+      expect(
+        _.isString(createNode.mock.calls[0][0].frontmatter.date)
+      ).toBeTruthy()
       expect(createParentChildLink.mock.calls).toMatchSnapshot()
       expect(createNode).toHaveBeenCalledTimes(1)
       expect(createParentChildLink).toHaveBeenCalledTimes(1)

diff --git a/packages/gatsby-transformer-remark/src/on-node-create.js b/packages/gatsby-transformer-remark/src/on-node-create.js
@@ -1,5 +1,6 @@
 const grayMatter = require(`gray-matter`)
 const crypto = require(`crypto`)
+const _ = require(`lodash`)
 
 module.exports = async function onCreateNode({
   node,
@@ -18,7 +19,20 @@ module.exports = async function onCreateNode({
   }
 
   const content = await loadNodeContent(node)
-  const data = grayMatter(content)
+  let data = grayMatter(content)
+
+  // Convert date objects to string. Otherwise there's type mismatches
+  // during inference as some dates are strings and others date objects.
+  if (data.data) {
+    data.data = _.mapValues(data.data, v => {
+      if (_.isDate(v)) {
+        return v.toString()
+      } else {
+        return v
+      }
+    })
+  }
+
   const contentDigest = crypto
     .createHash(`md5`)
     .update(JSON.stringify(data))

diff --git a/packages/gatsby/src/schema/data-tree-utils.js b/packages/gatsby/src/schema/data-tree-utils.js
@@ -60,7 +60,9 @@ const extractFieldExamples = (nodes: any[]) =>
       // TODO: if you want to support infering Union types this should be handled
       // differently. Maybe merge all like types into examples for each type?
       // e.g. union: [1, { foo: true }, ['brown']] -> Union Int|Object|List
-      if (!isSameType(obj, next)) return INVALID_VALUE
+      if (!isSameType(obj, next)) {
+        return INVALID_VALUE
+      }
 
       if (!_.isArray(obj || next)) {
         // Prefer floats over ints as they're more specific.

diff --git a/www/src/components/card.js b/www/src/components/card.js
@@ -7,7 +7,7 @@ const Card = ({ children }) => (
     css={{
       boxSizing: `border-box`,
       display: `flex`,
-      transform: "translateZ(0)",
+      transform: `translateZ(0)`,
       [presets.Tablet]: {
         flex: `0 0 50%`,
         maxWidth: `50%`,
@@ -36,7 +36,7 @@ const Card = ({ children }) => (
       css={{
         padding: rhythm(presets.gutters.default / 2),
         paddingBottom: 0,
-        transform: "translateZ(0)",
+        transform: `translateZ(0)`,
         [presets.Mobile]: {
           padding: vP,
           paddingBottom: 0,

diff --git a/www/src/components/cards.js b/www/src/components/cards.js
@@ -11,7 +11,7 @@ const Cards = ({ children }) => (
       background: `#fff`,
       borderRadius: presets.radiusLg,
       boxShadow: `0 5px 20px rgba(25, 17, 34, 0.1)`,
-      transform: "translateZ(0)",
+      transform: `translateZ(0)`,
     }}
   >
     {children}

diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js
@@ -60,7 +60,7 @@ const SegmentTitle = ({ children }) => (
       ...scale(-2 / 5),
       lineHeight: 1,
       textTransform: `uppercase`,
-      transform: "translateZ(0)",
+      transform: `translateZ(0)`,
     }}
   >
     {children}
@@ -78,10 +78,10 @@ const VerticalLine = () => (
       d="M10 40 L10 -10"
       css={{
         stroke: presets.brandLight,
-        strokeWidth: "3",
-        strokeLinecap: "round",
-        strokeDasharray: "0.5 10",
-        animation: `${lineAnimation} 400ms linear infinite`
+        strokeWidth: `3`,
+        strokeLinecap: `round`,
+        strokeDasharray: `0.5 10`,
+        animation: `${lineAnimation} 400ms linear infinite`,
       }}
     />
   </svg>
@@ -100,7 +100,7 @@ const borderAndBoxShadow = {
   width: `100%`,
   boxShadow: `0 5px 15px rgba(0,0,0,0.035)`,
   borderRadius: presets.radius,
-  transform: "translateZ(0)",
+  transform: `translateZ(0)`,
 }
 
 const SourceItems = ({ children }) => (

diff --git a/www/src/components/used-by.js b/www/src/components/used-by.js
@@ -47,7 +47,7 @@ const UsedBy = () => (
         .animation.curveDefault}`,
       order: `3`,
       flexGrow: `1`,
-      transform: "translateZ(0)",
+      transform: `translateZ(0)`,
       [presets.Phablet]: {
         paddingTop: rhythm(4),
         marginBottom: 0,
@@ -78,7 +78,7 @@ const UsedBy = () => (
         flexGrow: `1`,
         flexShrink: `1`,
         alignSelf: `flex-end`,
-        transform: "translateZ(0)",
+        transform: `translateZ(0)`,
         [presets.Phablet]: {
           flexGrow: `0`,
         },