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 blog_post_cta_block: made of a label and url field (both single-line text)

• Block blog_post_gallery_block: made of a gallery field (image gallery)

This GraphQL query will do the work:

1
query {
2
  allBlogPosts {
3
    title
4
    content {
5
      value
6
      blocks {
7
        __typename
8
        ... on RecordInterface {
9
          id
10
        }
11
        ... on BlogPostCtaBlockRecord {
12
          label
13
          url
14
        }
15
        ... on BlogPostGalleryBlock {
16
          gallery { url }
17
        }
18
      }
19
      links {
20
        __typename
21
        ... on RecordInterface {
22
          id
23
        }
24
        ... on BlogPostRecord {
25
          slug
26
          title
27
        }
28
      }
29
    }
30
  }
31
}

Rendering Structured Text content

You can then use the result of this query with one of the following libraries and components to render the field into your frontend of choice:

• 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;

• <StructuredText /> component if you need to render the field in React;

• <datocms-structured-text /> component if you need to render the field in Vue;

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.