Adding Estimated Read Time to Gatsby Posts

Wanting to preserve this blog's status as the cultural force we all know it to be, I've been adding some polishing touches. One of the features I added recently was the "estimated read time" that you see on sites like Medium.

Since Gatsby is awesome, I figured there had to be a plugin for such functionality. Turns out, there is. Also turns out, you don't need it. It's built right into Gatsby itself.

All you need to do is open up your blog-post.js in the template directory (assuming you're leveraging the excellent Gatsby Starter Blog) and add the key to your query.

export const pageQuery = graphql`
  query BlogPostBySlug(
    ...
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
      timeToRead 👈
    }
    ...
  }
`

Then, add it to your template:

<p>
  {post.frontmatter.date} &#183; {post.timeToRead} min
</p>

Shoutout to Huey Lee's post for pointing me in the right direction. Thank you for doing the hard work, so I didn't have to. And thank you, dear reader, for your...scrolls to top of page... 1 minute of attention.