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_text_block: made of a text field (multi-paragraph text);

• Block blog_post_quote_block: made of a quote field (multi-paragraph text) and author field (single-line string);

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

This GraphQL query will do the work:

query {
  allBlogPosts {
    title
    content {
      value
      blocks {
        __typename
        ... on RecordInterface {
          id
        }
        ... on BlogPostTextBlockRecord {
          text
        }
        ... on BlogPostQuoteBlockRecord {
          quote
          author
        }
        ... on BlogPostGalleryBlock {
          gallery { url }
        }
      }
      links {
        __typename
        ... on RecordInterface {
          id
        }
        ... on BlogPostRecord {
          slug
          title
        }
      }
    }
  }
}

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;