Keystone.js Content field type rendering best practice

Question

I have a field with type Content which I'd like to render into html. From GraphQL endpoint, I receive a slate.js structure like

 "contentExtended": {
          "document": "{\"object\":\"document\",\"data\":{},\"nodes\":[{\"object\":\"block\",\"type\":\"paragraph\",\"data\":{},\"nodes\":[{\"object\":\"text\",\"text\":\"Test extended\",\"marks\":[]}]},{\"object\":\"block\",\"type\":\"paragraph\",\"data\":{},\"nodes\":[{\"object\":\"text\",\"text\":\"\",\"marks\":[]}]},{\"object\":\"block\",\"type\":\"cloudinaryImage\",\"data\":{\"_joinIds\":[\"5feb1aad43a7940689283e62\"]},\"nodes\":[{\"object\":\"block\",\"type\":\"image\",\"data\":{},\"nodes\":[{\"object\":\"text\",\"text\":\"\",\"marks\":[]}]},{\"object\":\"block\",\"type\":\"caption\",\"data\":{},\"nodes\":[{\"object\":\"text\",\"text\":\"\",\"marks\":[]}]}]},{\"object\":\"block\",\"type\":\"paragraph\",\"data\":{},\"nodes\":[{\"object\":\"text\",\"text\":\"\",\"marks\":[]}]}]}"
        },

where contentExtended is the name of my field.

Note that the document also contains references to cloudinaryImage elsewhere in the GraphQL query result, therefore I assume that it's up to Keystone.js to know how to render it.

I'd like to render it into a html code that I'll use in my blog app, with least effort possible.

What is the recommended and correct way of doing that?

for reference, keystone graphql schema I have; I'm fetching posts with allPosts query.

https://gist.github.com/Firfi/42c9fd94c738cb463e4d7e7e28de751b

Answer 1

Keystone uses SlateJS v0.47, it has a different format than modern SlateJS.

Basically you are on your own, Keystone won't help you render it.

Here's an example how I do basic rendering:https://gist.github.com/dimaip/0454b58d360f26c1e6a87310ace61f8c

I don't use cloudinary, so not sure how you should render it, but I guess you could use the images's id ( 5feb1aad43a7940689283e62 ) to build a url?