一覧ページの記事並び順がおかしくなったので直す

[cheezenaan]

#151 の merge 後、一覧ページに表示される記事の並び順が frontmatter___date の降順にならなくなった。

Tl;dr

• gatsby-transformer-remark のバージョン 2.2.0 から 2.2.4 を使用していると発生
• 個々の記事の frontmatter に記載する date で '2019-02-14' のような String ではなく 2019-02-14 と記載することで発生
  • ref. Issues with sort fields gatsbyjs/gatsby#11368 (comment)
• 対応策
  • gatsby-transformer-remark のバージョンを 2.2.5 以降に上げる
  • 記事の frontmatter で date が String 以外で記載されている場合は String にする

調査メモ

• ローカルでも再現するか?: した 🚀
• service worker を無効化してみる: ダメ
• src/pages/index.tsx の IndexQuery を GraphiQL で実行しても再現するか?: した 🚀

repro

Query

query IndexQuery {
  allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) {
    posts: edges {
      post: node {
        frontmatter {
          title
          path
          date
        }
      }
    }
  }
}

Result

{
  "data": {
    "allMarkdownRemark": {
      "posts": [
        {
          "post": {
            "frontmatter": {
              "title": "シェルを zsh から fish に乗り換えたらモノクロームだった日常がカラフルに色づきはじめた",
              "path": "/migrate-fish-shell",
              "date": "2018-06-25T10:05:13.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "zsh の設定ファイルを整理して GitHub 上で管理することにした",
              "path": "/dotfiles-on-github",
              "date": "2018-06-24T02:18:10.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "Docker for Mac と Dinghy のパフォーマンスを比較してみた",
              "path": "/compare-docker-for-mac-with-dinghy",
              "date": "2018-06-18T05:21:56.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "TypeScript + Webpack4 な素振り環境を作った",
              "path": "/typescript-webpack4",
              "date": "2018-06-10T22:08:43.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "JavaScript だけでなくスタイルシートと画像ファイルも webpack 管理下に置いて、 Asset Pipeline から完全にサヨナラした",
              "path": "/say-boodbye-to-asset-pipeline",
              "date": "2018-01-29T01:15:04.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "Rails on Docker な開発環境からモダン JavaScript のビルド環境をコンテナごと独立させてみた",
              "path": "/rails-with-webpack-on-docker",
              "date": "2018-01-22T12:45:20.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "2018年を迎えたので開発環境を見直した(iTerm2 + zsh + prezto + peco + anyframe + vim + VSCode)",
              "path": "/renew-development-enviroinment",
              "date": "2018-01-02T04:08:09.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "2018年を迎えたので MacBook Pro のクリーンインストールをした(homebrew + Brewfile + mackup)",
              "path": "/clean-install-macbook-rev2018",
              "date": "2018-01-02T02:20:22.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "2017年を振り返る",
              "path": "/playback-2017",
              "date": "2017-12-29T06:26:48.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "『プロを目指す人のための Ruby 入門』出版記念イベント&リファクタリングコンテストに行ってきた",
              "path": "/ruby-cherry-book-event",
              "date": "2017-12-06T15:31:09.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "ES2015 + Babel + Webpack + ESLint な開発環境をつくった",
              "path": "/es2015-babel-webpack",
              "date": "2017-04-16T14:00:00.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "Docker上にRails5×MySQLな新規プロジェクトを爆速で構築する",
              "path": "/rails-on-docker-with-application-template",
              "date": "2017-03-05T04:21:24.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "Markdown エディタとして Atom を使えるようにするまでにやったこと",
              "path": "/atom-as-markdown-editor",
              "date": "2017-01-22T01:30:00.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "TypeScript に期待しすぎる前に胸に手を当てて考えること",
              "path": "/think-before-migrating-typescript",
              "date": "2019-01-10T01:30:00.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "個人ブログをはてなブログから Gatsby + Firebase Hosting に移行した",
              "path": "/hello-gatsby",
              "date": "2018-12-31T20:00:20.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "ストレングスファインダーで自分の資質をあらためて見直してみた",
              "path": "/review-strength-finder",
              "date": "2018-07-31T20:04:24.000Z"
            }
          }
        },
        {
          "post": {
            "frontmatter": {
              "title": "Hello, my First Gatsby post",
              "path": "/hello-world",
              "date": "2015-08-15T17:12:33.962Z"
            }
          }
        }
      ]
    }
  }
}

[cheezenaan]

It may be a issue of gatsby-transformer-remark.

See also:

• Issues with sort fields gatsbyjs/gatsby#11368
• fix(gatsby-transformer-remark): don't convert Date objects gatsbyjs/gatsby#10924 (comment)

To solve this issue make a workaround to remove all date strings in each markdown contents.

ref. gatsbyjs/gatsby#11654

Also it may be fixed when using this package version 2.2.5 or later.

ref.

• https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-remark/CHANGELOG.md#225-2019-02-12
• fix(gatsby-transformer-remark): restore behavior of serializing date-like fields to string gatsbyjs/gatsby#11716

[cheezenaan]

まぁ、service worker 動かすほどのアレでもないし別の PR で抹殺しよう。