Sorting dates seems to be broken!

Description

In my Gatsby project, I am displaying a list of items that I intent to sort by date. Sorting seems to be working as intended in GraphiQL, however the items are not correctly sorted in my Gatsby site. I consulted with @wardpeet over Discord, and he confirmed that this is indeed a Gatsby bug.

Steps to reproduce

If you clone my repo and checkout this PR, you will be able to see the issue clearly: https://github.com/teddywilson/clothesline-recordings/pull/8/files

Sorry it’s messy, I’m not really a web developer and am doing some refactoring. If you navigate to the “releases” tab in the site, you will notice the items are not sorted correctly. Each release has a date property, which also corresponds to a catalogue property (which you will see is out of order). By chance, the items may appear in order, so if that’s the case, please run gatsby clean && gatsby develop once more to reproduce. You will notice in the Gatsby cache, the dates are not sorted properly.

For context the page with the query in question is location at src/pages/releases.js (in the linked PR).

I tried various things to mitigate the issue – upgrading/downgrading Gatsby and related dependencies, using different date formats, using a different property to sort entirely (hence the sloppy “index” property that is introduced here), etc. Nothing appears to work.

Expected result

The items are sorted properly.

Actual result

The items are out of order.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 86.0.4240.198
    Firefox: 57.0.1
    Safari: 14.0.1
  npmPackages:
    gatsby: ^2.20.35 => 2.26.0
    gatsby-image: ^2.3.5 => 2.5.0
    gatsby-plugin-feed: ^2.5.0 => 2.7.0
    gatsby-plugin-google-analytics: ^2.2.5 => 2.5.0
    gatsby-plugin-manifest: ^2.3.7 => 2.6.0
    gatsby-plugin-material-ui: ^2.1.8 => 2.1.10
    gatsby-plugin-offline: ^3.1.5 => 3.4.0
    gatsby-plugin-react-helmet: ^3.2.5 => 3.4.0
    gatsby-plugin-sharp: ^2.5.7 => 2.8.0
    gatsby-plugin-typography: ^2.4.4 => 2.6.0
    gatsby-remark-copy-linked-files: ^2.2.4 => 2.4.0
    gatsby-remark-images: ^3.2.6 => 3.5.0
    gatsby-remark-prismjs: ^3.4.5 => 3.7.0
    gatsby-remark-responsive-iframe: ^2.3.4 => 2.5.0
    gatsby-remark-smartypants: ^2.2.4 => 2.4.0
    gatsby-source-filesystem: ^2.2.5 => 2.5.0
    gatsby-transformer-remark: ^2.10.0 => 2.10.0
    gatsby-transformer-sharp: ^2.4.7 => 2.6.0
  npmGlobalPackages:
    gatsby-cli: 2.13.0

[stephzero1]

Dates sorting seems broken on ISO dates like 2022-01-04T08:18:12.809Z

Same here!

A query like this:

{
  blog: allMdx(
    sort: {fields: [frontmatter___date], order: DESC}
    limit: 1000
    filter: {fileAbsolutePath: {regex: "/(blog)/.*.mdx$/"}}
  ) {
    edges {
      node {
        fields {
          locale
          isDefault
          slug
        }
        frontmatter {
          title
          date
        }
      }
    }
  }
}

Gatsby extract the entries in this order:

  "date": "2021-07-12T00:00:00.000Z"
  "date": "2020-10-07T00:00:00.000Z"
  "date": "2020-09-03T00:00:00.000Z"
  "date": "2020-05-27T00:00:00.000Z"
  "date": "2020-04-30T00:00:00.000Z"
  "date": "2020-03-14T00:00:00.000Z"
  "date": "2020-02-28T00:00:00.000Z"
  "date": "2020-05-15T00:00:00.000Z"
  "date": "2021-03-04T00:00:00.000Z"
  "date": "2021-05-31T00:00:00.000Z"
  "date": "2021-06-08T00:00:00.000Z"
  "date": "2020-10-06T00:00:00.000Z"

Why?

[cedricdelpoux]

Dates sorting seems broken on ISO dates like 2022-01-04T08:18:12.809Z