General Remark (Markdown) filter in GraphQL

Summary

As briefly noted here, it’d be useful to have Remark parse arbitrary data fields. This’d be even better if handled at the GraphQL data layer, because then the browser never has to process Markdown at all.

Basic example

<page-query>
query Post($id: String) {
  post(id: $id) {
    body(markdown: true)
  }
}
</page-query>

We’d then expect $page.post.body to be pre-rendered, ready to pass to v-html.

Motivation

I don’t just want Remark to parse .md files; in my case, Netlify CMS stores chunks of Markdown in my content’s .yml files wherever there’s a rich text field.

[hjvedvik]

Yes, it would be really nice to be able to parse any markdown content in the GraphQL layer 😃 We are working on a new schema API which could allow a plugin to for example add a @markdown directive which could be used on any String field to transform it to HTML. The API will be ready within a couple of weeks.

[patrikengborg]

I came up with this solution.

first npm install markdown-it --save

In gridsome.server.js, require it: var MarkdownIt = require('markdown-it')

then add:

api.loadSource(({ addSchemaResolvers }) => {
  addSchemaResolvers({
    ContentfulBlogPost: {
      body: {
        type: 'String',
        args: {
          markdown: 'Boolean'
        },
        resolve(node, args) {
          if (args.markdown) {
            const md = new MarkdownIt()
            return md.render(node.body)
          }

          return node.body
        }
      }
    }
  }
}

Then you can use body(markdown: true) in your GraphQL for that field.

That’s it!