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

…former (#20398)

* fix[gatsby-source-contentful] Contentful LongText fields require gatsby-transformer-remark

As shown here: #3205 (comment)
you cannot simply do 
```{
body{
 body}
}
since the body will be raw markdown, which is not html

* Update README.md

* Update packages/gatsby-source-contentful/README.md

Co-Authored-By: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>

* Rewrite for explaining the logic and add clarity

The text might not be perfect but it clearly explains what happens. Feel free to reuse it or change it.

* typo

* mention rich text as an alternative

* chore: format

* typo and polishing

* chore: format

Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>
Co-authored-by: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>

packages/gatsby-source-contentful/README.md

@@ -245,24 +245,43 @@ You might query for a **single** node inside a component in your `src/components
 
 #### A note about LongText fields
 
-If you include fields with a `LongText` type in your Contentful `ContentType`, their returned value will be **an object not a string**. This is because Contentful LongText fields are Markdown by default. In order to handle the Markdown content properly, this field type is created as a child node so Gatsby can transform it to HTML.
+On Contentful, a "Long text" field uses Markdown by default. The field is exposed as an object, while the raw Markdown is exposed as a child node.
 
-`ShortText` type fields will be returned as strings.
+```graphql
+{
+  contentfulCaseStudy {
+    body {
+      body
+    }
+  }
+}
+```
 
-Querying a **single** `CaseStudy` node with the ShortText properties `title` and `subtitle` and LongText property `body` requires formatting the LongText fields as an object with the _child node containing the exact same field name as the parent_:
+Unless the text is Markdown-free, you cannot use the returned value directly. In order to handle the Markdown content, you must use a transformer plugin such as [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/). The transformer will create a childMarkdownRemark on the "Long text" field and expose the generated html as a child node:
 
 ```graphql
 {
   contentfulCaseStudy {
-    title
-    subtitle
     body {
-      body
+      childMarkdownRemark {
+        html
+      }
     }
   }
 }
 ```
 
+You can then insert the returned HTML inline in your JSX:
+
+```
+  <div
+  className="body"
+  dangerouslySetInnerHTML={{
+       __html: data.contentfulCaseStudy.body.childMarkdownRemark.html,
+     }}
+   />
+```
+
 #### Duplicated entries
 
 When Contentful pulls the data, all localizations will be pulled. Therefore, if you have a localization active, it will duplicate the entries. Narrow the search by filtering the query with `node_locale` filter: