Content Delivery API > Structured text fields

If you have Structured Text fields you can use GraphQL fragments to fetch the different blocks.

Suppose a blog_post model has a Structured Text field called content, which in turn accepts links to other blog posts and the following embedded blocks:

• Block cta_block: with a label and url fields (both Single-line text)

• Block carousel_block: with an Asset Gallery field called gallery

• Block mention_block: with a Single-line text field called username

This GraphQL query will return all the data needed to render it:

1
query {
2
  allBlogPosts {
3
    title
4
    content {
5
      value
6
      blocks {
7
        __typename
8
        ... on RecordInterface {
9
          id
10
        }
11
        ... on CtaBlockRecord {
12
          label
13
          url
14
        }
15
        ... on CarouselBlockRecord {
16
          gallery { url }
17
        }
18
      }
19
      inlineBlocks {
20
        __typename
21
        ... on RecordInterface {
22
          id
23
        }
24
        ... on MentionBlockRecord {
25
          username
26
        }
27
      }
28
      links {
29
        __typename
30
        ... on RecordInterface {
31
          id
32
        }
33
        ... on BlogPostRecord {
34
          slug
35
          title
36
        }
37
      }
38
    }
39
  }
40
}

Rendering Structured Text content

You can then use the result of this query with one of the following libraries to render the result as HTML:

• datocms-structured-text-to-plain-text to render it as plain text;

• datocms-structured-text-to-html-string to render it as an HTML string;

• datocms-structured-text-to-dom-nodes to transform it in a list of DOM nodes;

We also have ready-made components for the most popular frontend frameworks:

• React

• Vue

• Svelte

• Astro

Filtering records by contained blocks

If you need to filter records based on the content within their embedded blocks, please refer to the Deep filtering section of this guide, where this scenario is explained in detail.