How to get only a portion of the mdx rendered article with gatsby? For example, first several sentences of a mdx blog article?

Question

I am making a blog using GatsbyJS + MDX. For the articles list page, I want to show the first several sentences/paragraphs of each article (just as you almost always see in a normal blog). However, I cannot figure out a way to do so in mdx.

For example, I cannot simply truncate the .mdx file (say truncate first 1000 bytes), otherwise we may end up having unclosed tags and so on, making mdx confused.

Answer 1

If you use gatsby-plugin-mdx you can expose a part of your mdx file by add excerpt field into your query and specify the length of that part, Example:

query MyQuery {
  allMdx {
    nodes {
      excerpt(pruneLength: 100)
    }
  }
}