Rendering structured text data using GraphQL

[albioncircus]

Hello guys,

I’ve created a list using structured text and am having trouble accessing the values and displaying them using graphQL.

I’ve using the render package from here: structured-text/packages/to-plain-text at main · datocms/structured-text · GitHub

I can return the data but it comes through as one big text block (8 separate values bunched together).

I’d like to create a list item for each text value that gets returned, and I’ve tried mapping over them but then I get a function error.

The attached screenshots should make this a lot easier to visualise and show what I’ve tried.

Any help would be greatly appreciated!

Thanks

[roger]

We’ve also resolved this one over email Going to mark this as solved, but please feel free to follow up via email, okay? Just trying to avoid duplicates.

---

And for anyone else in a similar situation, the code should be something like this:

import { render } from "datocms-structured-text-to-html-string"; // instead of the plain text version

// const response = [...] // same as before

const json = await response.json();
const allServicesPages = json.data.allServicesPages; // All the pages, not just one of them
---

<ul>
  {allServicesPages.map((page) => // each individual page
    <li>
      {page.serviceHeading}: <Fragment set:html={render(page.serviceList.value)}> // make sure you sanitize this if you have user-generated data!
    </li>
  )}
</ul>