Documentation Headles CMS and Gatsby with error

[mativiscusso]

This is:

• Bug

Specifications

• version:
• OS: Windows 10 64bits
• Browser: Chrome - Firefox

Expected Behavior

Actual Behavior

The expected behavior is that the guide to build the blog with gatsby and headless cms works and does not throw an error in the rendering

Steps to Reproduce the Problem

1. I generate the API models
2. I install graphql plugin in gatsby and put my access token
   3.I paste the code as it appears in the documentation and when running the compilation it throws an error

Detailed Description

The result of the query in the body field cannot be rendered since it is a JSON format.
// We render a nice list of blog posts const BlogPosts = blogPosts.map(post => ( <div key={post-${post.id}}> <h1>{post.title}</h1> <p style={{whiteSpace: "pre-wrap"}}>{post.body}</p> </div> ))
This is the error it throws in the browser when run command gatsby develop

Objects are not valid as a React child (found: object with keys {type, children}).

Possible Solution