[help] Acessing data via trasformer-remark

[rdricco]

Hi, it is possible to access graphcms data via MarkdownRemark? I want to use some remark plugins.

[Redmega]

I don't believe we supply data in a way that can be used by the gatsby remark plugins, but this is something that I'd like to add! If you have an idea on how to do it (or code & a PR) that would be great!

[rdricco]

I don't know how to do it, but looks like we only need to specify the mime type of graphcms nodes as text/markdown and the transformer-remark plugins will work. I think source-contentful do this, I saw some projects using remark-images.

info about source plugins

[Redmega]

To the best of my knowledge, there's no way to tell via introspection if a post is markdown. I've brought it up in the GraphCMS Slack so while that conversation happens, I've been brainstorming some ways for users to define properties for custom post types.

1. There can be a config function (or object) mapping node types and fields to custom properties. (Don't like this option as the user already has to define a config query. The less configuration the better)
   This would look something like:

propertyMap: {
  Post: {
    body: {
      mediaType: 'text/markdown'
    }
  }
}

This would have the benefit of being easy to code for, but introduces another (albeit optional) step for users.

2. There can be a comment convention where we define custom properties in the comments with a special comment identifier. Example:

query myConfigQuery {
  allPosts {
    title
    body #= mediaType: text/markdown
    date
  }
}

This would be a bit trickier to program but is definitely more convenient for the user as they have one less configuration option to create -- They just have to comment their already existing query and they're good to go.

This, of course, should be a last resort. Ideally we'd be able to get what we need through introspection. But there might not be a way to introspect the appearance of a string field in graphcms. We shall see.

@rdela thoughts?

[rdela]

I am fine with option [2], annotating the query with a comment.

@hmeissner in Slack:

I was trying to do this to utilize the transformer remark in the plugin but I don’t think you can, you need to specify which fields are supposed to give back markdown in gatsby

Prior art (think these commits are what he refers to above):
hygraph/gatsby-graphcms-example#3

This is interesting for us, maybe not here, possibly elsewhere:
ardatan/graphql-tools#433

I thought schema stitching could profit from an "annotated schema" approach to reduce boilerplate and therefore implemented almilo/graphql-needle as PoC.

And here is SO thread on GQL string literal field descriptions vs comments
https://stackoverflow.com/questions/39962867/how-do-i-add-a-description-to-a-field-in-graphql-schema-language

[hmeissner]

You can actually leverage transformer remark for your markdown data pretty easily, the only downside being that we really have no way of knowing which fields are markdown out of the box. To make this work you simply have to specify this in gatsby-node.js, something like:

exports.onCreateNode = ({ node, boundActionCreators }) => {
  const { createNode } = boundActionCreators
  // Reviews here is the node you'd like to create your markdown from
  if (node.internal.type === `Reviews`) {
    createNode({
      id: `md-${node.id}`,
      parent: node.id,
      children: [],
      internal: {
        type: `${node.internal.type}Markdown`,
        mediaType: `text/markdown`,
        content: node.review,
        contentDigest: node.internal.contentDigest
      }
    })
  }
}

[rdricco]

Thank you @hmeissner, your solution solved my problem perfectly.
I'm closing the issue as the original purpose was reached, but it can be reopened if anyone wants to continue the discussion and make this a out-of-box option on graphcms plugin.

[rdela]

@rdricco thanks that was kind of you to close the issue, but I’m reopening because I think at the very least we should add something like what Hugo wrote to the readme and adjust the example to be like this.

What do you think?

[Redmega]

Yes, at the very least we should include that snippet (or a similar one) here or in the example repo

[rdricco]

Great! I think this example is very useful, maybe we need something like this on Gatsby Docs as this one could be used for other purposes, like merging sources too.

[rdela]

gatsby-transformer-remark example now deployed to
https://github.com/GraphCMS/gatsby-graphcms-example
+
https://github.com/rdela/gatsby-graphcms-rd
so can be viewed at
https://kokodokai.com/ / https://kokodokai.netlify.com/

Relevant source files
https://github.com/GraphCMS/gatsby-graphcms-example/blob/master/gatsby-node.js
https://github.com/GraphCMS/gatsby-graphcms-example/blob/master/src/templates/review-detail.js

Closing this issue but feel free to reopen or ping me with ?s

Thanks @rdricco + @hmeissner + @Redmega!!!