gatsby: 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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 21 (6 by maintainers)

Most upvoted comments

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?

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

I’ve also had this issue after upgrading.

For me, it seems that Gatsby is parsing

date: 2022-10-15

differently from

date: "2022-10-15"

And even if I explicitly set it to be a String in the schema, it always parses the first one as a Date and the second as a string. Hence all items using the first formatting appear before all articles using the second formatting. Explicitly setting Date as the format in the schema also didn’t fix this.

The workaround for me for now is to standardise and put quotation marks around all my dates.