Multiple date formats in one Gatsby GraphQL query

Using some special magic, Gatsby can transform date fields in GraphQL queries into different formats. But what if you would like more than one format, and don't want to import an entire library?

Here is the example the Gatsby docs use for formatString:

{
  allMarkdownRemark(filter: { frontmatter: { date: { ne: null } } }) {
    edges {
      node {
        frontmatter {
          title
          date(formatString: "dddd DD MMMM YYYY")
        }
      }
    }
  }
}

My problem was that I wanted a nicely formatted string, but also needed a valid datetime value for a <time> element. Turns out this is really easy in GraphQL queries, but does not turn up in searches (that I could find).

The solution is that you can use field aliases to repeat a field in the same query. This really applies to any field, but becomes especially useful for field transforms.

Here's the same query, but with two different date formats:

{
  allMarkdownRemark(filter: { frontmatter: { date: { ne: null } } }) {
    edges {
      node {
        frontmatter {
          title
          relativeDate: date(fromNow: true)
          isoDate: date(formatString: "YYYY-MM-DDTHH:mm:ssZ")
        }
      }
    }
  }
}

This will result in an object with frontmatter.relativeDate and frontmatter.isoDate:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "Break with a Banshee",
              "relativeDate": "28 years ago",
              "isoDate": "1992-01-01T00:00:00+00:00"
            }
          }
        }
      ]
    }
  }
}

I'm sure this is obvious to GraphQL pros, but it took me a while to figure this one out, so I wanted to share. Yay for learning!