👨🏻‍💻 Render Raw Contentful with renderRichText

Berikut contoh graphql:

newsPost: allContentfulNews {
  nodes {
   id
   title          
   post {
     raw
     references {
       ... on ContentfulAsset {
       contentful_id
       title
       gatsbyImageData(width: 1000)
       __typename                
       }              
     }            
   }            
   slug          
 }        
}

1. Buat file mis: news-post.js, lalu gunakan plugin berikut:

   • import { GatsbyImage, getImage } from "gatsby-plugin-image";

   • import { renderRichText } from "gatsby-source-contentful/rich-text";

   • import { BLOCKS } from "@contentful/rich-text-types";

2. Buat options untuk merender image yang ada dalam post->raw

const options = {    
 renderNode: {  
  [BLOCKS.EMBEDDED_ASSET]: (node) => 
  {        
   const { 
    gatsbyImageData, 
    title 
   } = node.data.target;
   return 
    <GatsbyImage 
     image={getImage(gatsbyImageData)} 
     alt={title}
    />;      
   },
  },
};

dan return data seperti berikut

{renderRichText(article.post, options)}

Note: Plugin render tersebut merupakan bawaan dari GatsbyJS. Jangan ada plugin render apapun selain gatsby-source-contentful/rich-text agar tidak conflict atau error saat render data.