How to render fields.document return

[NeeshSamsi]

Hey! So I am storing some data in the document field type. It returns an async function so I am receiving as follows:

const homepage = await reader.singletons.homepage.read()
const story = await homepage?.storyDescription()

Returns an array of document elements.

1. First of all, is this the correct way to fetch a document field?
2. Is there a utility or external package used to parse this array into html or into a react node.

Returned data JSON.stringify(ied)

[
  {
    "type": "paragraph",
    "children": [
      {
        "text": "Education is a process of Exploration, Discovery, Application, Integration."
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": "It is a continuous journey to the source of knowledge itself. Through this process we help children and youngsters learn about not only academics but also the mind, emotions, relationships, work, money, health and critical thinking for a joyful and meaningful life."
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": "We Aim to help local students and youth to:"
      }
    ]
  },
  {
    "type": "ordered-list",
    "children": [
      {
        "type": "list-item",
        "children": [
          {
            "type": "list-item-content",
            "children": [
              {
                "text": "Become educated and well-rounded individuals."
              }
            ]
          }
        ]
      },
      {
        "type": "list-item",
        "children": [
          {
            "type": "list-item-content",
            "children": [
              {
                "text": "Become intellectually and emotionally independant and resilient individuals."
              }
            ]
          }
        ]
      },
      {
        "type": "list-item",
        "children": [
          {
            "type": "list-item-content",
            "children": [
              {
                "text": "Become skilled and confident to take care of their lives and livelihoods."
              }
            ]
          }
        ]
      },
      {
        "type": "list-item",
        "children": [
          {
            "type": "list-item-content",
            "children": [
              {
                "text": "Become aware, conscious and constructive members of the communities they live in."
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": ""
      }
    ]
  }
]

[simonswiss]

Hey!

1. It sort of was the best way to do it, but there is a "new" reader API option called resolvedLinkedFiles that you can pass to the reader call, and it will resolve the fields returned as Promises for you:

const homepage = await reader.singletons.homepage.read({ resolvedLinkedFiles: true })

2. Yep, you can use the DocumentRenderer from Keystatic, which is designed to do exactly that — parse the structured JSON data into markup:

import { DocumentRenderer } from '@keystatic/core/renderer'

const homepage = await reader.singletons.homepage.read({ resolvedLinkedFiles: true })

return (
  <div>
    <h1>{post.title}</h1>
    <div>
      <DocumentRenderer document={homepage.storyDescription} />
    </div>
  </div>
)

This desperately needs documentation and exampes — but at least for now you can get a good amount of help from TypeScript.

You can also reference to the Keystone Document Renderer here: https://keystonejs.com/docs/guides/document-fields#rendering

Hope it helps! ✨

[NeeshSamsi]

I've been asking quite a few simple questions. Thanks for the detailed responses. Hopefully, this helps others in the future at least.

[simonswiss]

You're welcome — and yes, hoping this helps other folks for sure!