close

Filter

loading table of contents...

Headless Server Developer Manual / Version 2207

Table Of Contents

14.2.5.2 Rendering Markup as Richtext

The detail text is markup and there are multiple npm modules that help with rendering it correctly. But for now it is sufficient to use dangerouslysetinnerhtml, a way of React to set the inner HTML for DOM nodes. Since it is not secure and open for cross-site scripting it is not advised to use it in a real world scenario.

Image and Richtext ready, the article component looks as follows:

const ARTICLE_QUERY = gql`
  query ArticleQuery($articleId: String!) {
    content {
      article(id: $articleId) {
        id
        title
        detailText
        picture {
          data {
            uri
          }
        }
      }
    }
  }
`;

function Article(props) {
  const idFromLink = props.match.params.id;
  const articleId = idFromLink ? idFromLink : props.id;

  const { loading, error, data } = useQuery(ARTICLE_QUERY, { variables: { articleId } });

  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Error {error}</p>;
  }

  const article = data.content.article;
  const imageUrl = serverUrl + article.picture.data.uri;

  return (
    <div className="article-container">
      <h2>{article.title}</h2>
      <img src={imageUrl} alt="" />
      <p dangerouslySetInnerHTML={{ __html: article.detailText }} />
    </div>
  );
}

export default Article;

Example 14.13. Detailview of an article component


pwa example article

Figure 14.2. Screenshot of the article detail page


Note

Note

If you like to dive into more details and to understand some core concepts, please go to The GitHub repository https://github.com/CoreMedia/coremedia-headless-client-react. It includes an example app written in TypeScript with routing, view dispatching, preview integration and more.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.