[Gatsby & Contentful] sourcing rich text from Contenful

📍참고

https://www.gatsbyjs.com/blog/how-to-use-the-contentful-rich-text-field-with-gatsby/

How To Use The Contentful Rich Text Field with Gatsby | Gatsby

https://github.com/contentful/rich-text/tree/master/packages/rich-text-plain-text-renderer

GitHub - contentful/rich-text: Libraries for handling and rendering Rich Text 📄

 

📍Contentful CMS 에서 rich text type 데이터를 Gatsby 에서 소싱하기

1️⃣GraphQL 에서 richtext 이름 { raw } 로 쿼리

- 예시

{
  allContentfulPosts {
    nodes {
      richText {
        raw
      }
    }
  }
}

 

- raw 는 "Bacon\",\"marks\":[{\"type\":\"bold\"}] 같은 JSON 형식이기 때문에 JSON.parse 메서드로 파싱을 해줘야 함

 

2️⃣ renderRichText 헬퍼 함수 이용

options를 설정하는 방법이 복잡하고 코드가 쓸데없이 길어짐

import { renderRichText } from 'gatsby-source-contentful/rich-text'

return <div>{renderRichText(richText.raw, options)}</div>

 

✅2️⃣Contentful 에서 제공하는 패키지 이용

- 설치

npm install @contentful/rich-text-plain-text-renderer

 

- 예시

import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
          data: {},
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
          data: {},
        },
      ],
    },
  ],
};

documentToPlainTextString(document); // -> Hello world!

 

- 메서드 사용 전에 richText.raw 를 JSON.parse 로 파싱해서 인수로 넣어야 함!