Serialize date objects in markdown frontmatter to avoid type mismatch…

…es when inferring GraphQL types fixes #2096

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",

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,7 @@ Where oh where is my little pony?
       boundActionCreators,
     }).then(() => {
       expect(createNode.mock.calls).toMatchSnapshot()
+      expect(_.isString(createNode.mock.calls[0].frontmatter.date)).toBeTruthy()
       expect(createParentChildLink.mock.calls).toMatchSnapshot()
       expect(createNode).toHaveBeenCalledTimes(1)
       expect(createParentChildLink).toHaveBeenCalledTimes(1)

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))

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.

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,

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}

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 }) => (

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`,
         },