Contentful get richtext field content

Question

I'm building a blog for my personal website and I choose Contentful as a headless CMS. However, I succeeded at accessing the fields with this query :

    const query = `
    {
      blogCollection {
        items{
            title
            slug
            cover{
                url
                title
            }
        }
      } 
    }
    `

But I don't know how to get my rich text's content as well and render it in my website.

My blog type looks like this :

JSON preview:

{
  "name": "Blog",
  "description": "",
  "displayField": "title",
  "fields": [
    {
      "id": "title",
      "name": "Title",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "slug",
      "name": "slug",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [
        {
          "unique": true
        }
      ],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "cover",
      "name": "Cover",
      "type": "Link",
      "localized": false,
      "required": false,
      "validations": [],
      "disabled": false,
      "omitted": false,
      "linkType": "Asset"
    },
    {
      "id": "content",
      "name": "content",
      "type": "RichText",
      "localized": false,
      "required": true,
      "validations": [
        {
          "enabledMarks": [
            "bold",
            "italic",
            "underline",
            "code"
          ],
          "message": "Only bold, italic, underline, and code marks are allowed"
        },
        {
          "enabledNodeTypes": [
            "heading-3",
            "heading-4",
            "heading-5",
            "heading-6",
            "ordered-list",
            "unordered-list",
            "hr",
            "blockquote",
            "embedded-entry-block",
            "embedded-asset-block",
            "table",
            "hyperlink",
            "entry-hyperlink",
            "asset-hyperlink",
            "embedded-entry-inline",
            "heading-1",
            "heading-2"
          ],
          "message": "Only heading 3, heading 4, heading 5, heading 6, ordered list, unordered list, horizontal rule, quote, block entry, asset, table, link to Url, link to entry, link to asset, inline entry, heading 1, and heading 2 nodes are allowed"
        },
        {
          "nodes": {}
        }
      ],
      "disabled": false,
      "omitted": false
    }
  ],
  "sys": {
    "space": {
      "sys": {
        "type": "Link",
        "linkType": "Space",
        "id": "3oa8py5argun"
      }
    },
    "id": "blog",
    "type": "ContentType",
    "createdAt": "2022-10-17T15:18:25.241Z",
    "updatedAt": "2022-10-17T15:18:25.744Z",
    "environment": {
      "sys": {
        "id": "master",
        "type": "Link",
        "linkType": "Environment"
      }
    },
    "publishedVersion": 1,
    "publishedAt": "2022-10-17T15:18:25.744Z",
    "firstPublishedAt": "2022-10-17T15:18:25.744Z",
    "createdBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "5TAfaCaLZgOEcEh6haDIYA"
      }
    },
    "updatedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "5TAfaCaLZgOEcEh6haDIYA"
      }
    },
    "publishedCounter": 1,
    "version": 2,
    "publishedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "5TAfaCaLZgOEcEh6haDIYA"
      }
    }
  }
}

How can I adjust my Query so I can get my rich text and how can I render it correctly in my page ?

I'm using NextJS

Answer 1

Since you're using Rich Text, to fetch the content your GraphQL query should look as follow:

{
  blogCollection {
    items {
      title
      slug
      cover {
        title
        description
        url
      }
      content {
        json
      }
    }
  }
}

json in content will return the Rich Text as a JSON object. You can then use the Rich Text Render to render the content on your site.

Here's the Next.js and Contentful starter guide that might be useful: https://www.contentful.com/nextjs-starter-guide/