fix(gatsby-source-contentful): LongText fields require markdown transformer

[slk333]

TLDR: The main problem is that if you follow the current documentation, you end up with raw markdown in your pages instead of the expected formatted content

As shown here: #3205 (comment)

The source plugins still exposes the raw markdown but generally you'd want to use the transformed HTML as in the above code sample.

this means doing the following will return raw markdown instead of html.

body{
  body
  }
}

You have to use a transformer plugin to transform the markdown into html.
The doc was misleading since it suggested that using LongText can be used without a transformer, and said that the markdown was transformed by Gatsby (incorrect). As a result, if someone were to follow the example, he would get raw markdown displaying in the webpage, as opposed to the expected result.

Description

Documentation

Related Issues

[slk333]

pinging @jserrao as he authored this part I'm trying to clarify.

[jserrao]

@slk333 - I remember when I wrote this, you had to include body inside the query or it wouldn't work correctly - honestly can't remember the specifics of whether it returned markdown or HTML. I trust that your improvement is correct slk333.

[slk333]

at the moment, here's what you get when you query the child node:

you get raw markdown

As for React Markdown:

The advantage of a React Markdown component was that you don't have to do the inline html insert, which looks bad. You could simply take the markdown node and do:

<ReactMarkdown source={data.contentfulTest.body.body} />

credit @bowenac
but as a drawback you miss some features of the transformer.

[jserrao]

Weird, that night have changed. I don't think it was always encoded like that.

…

On Thu, Jan 9, 2020, 16:42 slk333 ***@***.***> wrote: at the moment, here's what you get when you query the child node [image: Screenshot 2020-01-09 at 22 40 54] <https://user-images.githubusercontent.com/23578949/72107217-31caa680-3331-11ea-8ee2-53474944176f.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20398?email_source=notifications&email_token=AAHHKVX37ENTF2WYPJWFUVTQ46K2PA5CNFSM4KCOEBKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIR4JTI#issuecomment-572769485>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHHKVVPHCIAFZ23GZHLDV3Q46K2PANCNFSM4KCOEBKA> .

[vladar]

Content looks accurate to me (tried with contentful) but I think we need another pair of eyes from @gatsbyjs/learning to approve the text

[slk333]

sorry I didn't intend to delay the review, didn't see you asked for a review. Thanks @vladar

[vladar]

Looks like lint checks are failing. Try running yarn format on a repo when you are ready. Also, there is a WIP label in case if you still work on this PR.

P.S. Thanks for this fix by the way!

[laurieontech]

Looks good to me! Thanks for the clear explanation.

[slk333]

Hi @vladar , thanks for your help! I'm still a bit confused on how to fix the lint check failure. Do I have to download the whole gatsby repo and run yarn format directly on that repo?
Or maybe I can open the document and click on "Format document" on VSCode with the prettier plug-in? When I tried to do that, it also formats other parts of the document, so I'm not sure if it's intended or not.

[laurieontech]

Was able to run it for you :) Thanks so much for the PR!