Use GraphQL Queries with JavaScript Utils SDK to Render JSON RTE Content

npm i @contentstack/utils

const renderOption = {
// to render Supercharged RTE NodeType content such as paragraph, link, table, ordered list, unordered list and more.
   p: (node,next) => {
       `<p class='class-id'>${next(node.children)}</p>`
 // you will need to call the next function with node children contents
   }
   h1: (node,next) => {
       `<h1 class='class-id'>${next(node.children)}</h1>`
 // you will need to call the next function with node children contents
   }
   //to render Supercharged RTE MarkType content like bold, italic, underline, strikethrough, inline code, subscript, and superscript
   bold: (text) => {
       `<b>${text}</b>`
   }
//to render block-type embedded items
   block: {
      'product': (entry, metadata) => {
              '<div>
                  <h2 >{entry.title}</h2>
                   <img src={entry.product_image.url}   alt={entry.product_image.title}/>
                  <p>{entry.price}</p>
              </div>'
        },
//to render the default
'$default': (entry, metadata) => {
           '<div>
               <h2>{entry.title}</h2>
               <p>{entry.description}</p>
           </div>'
       }
   },
//to display inline embedded items
   inline: {
       '$default': (entry) => {
           '<span><b>{entry.title}</b> - {entry.description}</span>'
       }
   },
//to display embedded items inserted via link
   link: (entry, metadata) => {
       '<a href="{metadata.attributes.href}">{metadata.text}</a>'
   },
//to display assets
   display: (asset, metadata) => {
       '<img src={metadata.attributes.src} alt={metadata.alt} />'
   }
}

client
  .query({
    query: gql`query {
      all_product(locale: "en-us") {
        items {
          title
          description
          price
                    rte_fieldUid
          featured_imageConnection(limit: 10) {
            edges {
              node {
                url
              }
            }
          }
        }
      }
    }`
  })
  .then(result =>{
    Utils.jsonToHtml({ entry: result.all_product.items, paths: ["rte_fieldUid"], renderOption})
  })
);

embedded_itemsConnection(skip: 1, limit: 3) {
          edges {
            node {
              ... on KitchenAppliances {
                title
                kitchen_appliance_price_in_usd
              }
              ... on SysAsset {
                title
              }
            }
          }
        }