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

gatsby-transformer-remark exposes an excerpt field that can be truncated to any desired length using pruneLength, which is a piece of the markdown body.

For example:

{
  allMarkdownRemark {
    edges {
      node {
        excerpt(pruneLength: 280)
      }
    }
  }
}

With the MDX, the outer node will differ from the snippet above but as long as you use gatsby-transformer-remark the excerpt will be available. You can use gatsby-transformer-remark by filling gatsbyRemarkPlugins object

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-transformer-remark`,
      },
    ],
  },

For extremely customizable scenarios, you can use gatsby-plugin-excerpts plugin.

Answer 2

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)
    }
  }
}