Gatsby: Fetch markdown content from gatsby-source-drupal and parse it with gatsby-transformer-remark

[jmolivas]

I've used a Gatsby project using gatsby-transformer-remark and it worked great with md files.

Now I am in the need to use gatsby-source-drupal plugin. And the data fetched from Drupal is retrieved as HTML and Markdown format (I am using a WYSIWYG that output Markdown from Drupal)

This is the current used query to fetch data where value contains Markdown format and processed HTML format.

  query($slug: String!) {
    nodePage(fields: { slug: { eq: $slug } }) {
      title
      path {
        alias
      }
      body {
        value
        processed
      }
      fields {
        slug
      }
    }
  }

There is a config, action, or event I can use to transform the Markdown content to HTML via the gatsby-transformer-remark plugin to take advantage of among others image and link preprocessing

Thanks

[pieh]

Hey @jmolivas,
there is no config for that (yet - we will be working on making stuff like that simplier in future), but you can make it work - it requires some post processing, so remark plugin would handle those:

gatsby-node.js

exports.onCreateNode = ({ node, actions }) => {
  if (node.internal.type === 'NodePage') {
    const { createNode, createNodeId, createNodeField } = actions

    // take markdown content
    const content = node.body.value

    // create node with body content
    const textNode = {
      id: createNodeId(`${node.id}MarkdownBody`),
      parent: node.id,
      children: [],
      internal: {
        type: _.camelCase(`${node.internal.type} MarkdownBody`),
        // mediaType will allow remark plugin to transform plain
        // text into markdown node
        mediaType: `text/markdown`,
        content,
        contentDigest: digest(content),
      },
    }

    createNode(textNode)

    // add link
    createNodeField({ node, name: 'markdownBody___NODE', value: textNode.id })
  }
}

And then you should be able to query fields.markdownBody.childMarkdownRemark:

  query($slug: String!) {
    nodePage(fields: { slug: { eq: $slug } }) {
      title
      path {
        alias
      }
      body {
        value
        processed
      }
      fields {
        slug
        markdownBody {
          childMarkdownRemark {
            html
          }
        }
      }
    }
  }

[jmolivas]

Yay! Awesome @pieh this works great thanks