GatsbyのHot reloadがMarkdownファイルをイジると死ぬ

どうしたの

GatsbyにはHot reload機能があって、普通にReactを書いているだけなら大丈夫なんですが、gatsby-source-filesystemとかでMarkdownをレンダリングしたい時に、Markdownを編集するとhot reloadが死にます。

GraphQLクエリが非同期で発行されるので、データが入っていない状態が存在することが原因ぽいです。開発中にいちいちhot reloadが死ぬと煩わしくてしょうがないのでこれを解決します。

解決

このIssueが参考になりました。

GraphQLのクエリを通してデータを引っ張ってくる部分がnullableであるという前提を置いてコードを書いていくと良さそうです。自分の場合はもともとこんな感じで書いていました。MDXを使っています。

post-template.tsx

export default ({ data } : Props) => {
  const { body, excerpt, headings, frontmatter } = data.mdx;

  return (
    <>
      <SEO />
      <StyledPost
        body={body}
        headings={headings}
      />
    </>
  );
};

これだとdata.mdxにデータが入る前にレンダリングされると死ぬので、以下のように一行追加しました。

post-template.tsx

export default ({ data } : Props) => {
+  if (!data.mdx) return <></>;
  const { body, excerpt, headings, frontmatter } = data.mdx;

  return (
    <>
      <SEO />
      <StyledPost
        body={body}
        headings={headings}
      />
    </>
  );
};

これでMarkdownファイルを編集しても、一瞬ホワイトアウトするくらいで、GraphQLクエリの実行結果が入ってきたら正常にレンダリングされるようになりました。

まとめ

二回目ですが,
GraphQLで引っ張ってくるデータは非同期処理が基本になっているので、nullableであることを前提においておくとよいですね。👰
そもそも型定義からnullableにしておきましょう。