How to render RAW format of excerpt from WPGraphQL plugin using React

Welcome to my second post from "How to?" series. Some of you might be experiencing issues with rendering RAW format of excerpt if you're reading this article. I'll explain the reasons why this is the case, some of the solutions to sort this out and my step-by-step guidance to render excerpt using dangerouslySetInnerHTML in React.

Prerequisites

• A WordPress instance with WPGraphQL plugin.
• New to WordPress? WPGraphQL offers an introduction to WordPress for beginners here.
• A React app. You can use this built-in toolchain by React to create a single-page app.

Problem: excerpt(format: RAW) in the query returns null in React while it is working fine in WPGrapghQL editor.

This is your query:

query GetExcerpt {
  posts(where: {}, first: 1) {
    edges {
      node {
        excerpt(format: RAW)
      }
    }
  }
}

When you run the query, this is how response looks on WPGraphQL window:

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "excerpt": "\"In this tutorial, we are simply scratching the surface on what's available with this new and amazing service.\""
          }
        }
      ]
    }
  }

Let's check out how our query returns data when we make this request from our React app:

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "excerpt": null
          }
        }
      ]
    }
  }

We have a situation where our query works well in GraphQL plugin window, returning "excerpt": "\"In this tutorial, we are simply scratching the surface on what's available with this new and amazing service.\"" while the same query results in "excerpt": null in our React app.

The main reason why this is happening is because user (in this case you) needs authentication in order to access the RAW content. Because the query was done in admin area, it worked well in the GraphQL window. However, not all values are publicly visible on remote requests.

GraphQL plugin offers these visibility options:

• Administrative content: Types and properties are kept visible only to registered users for security reasons. Unauthorized users need to set user authentication & authorization to access data depending on the situation.
• Public content: This content is visible to not-registered users.

Solutions
One of these three solutions might help you get this sorted.

1. Authenticate the query in your app.
2. Override private flag in admin settings which is described here.
3. Change query format to default and use dangerouslySetInnerHTML to display content.

Let's take the easiest way and implement step 3.

Firstly, let's remove format option from query:

query GetExcerpt {
  posts(where: {}, first: 1) {
    edges {
      node {
        excerpt
      }
    }
  }
}

This query will return this data:

  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "excerpt": "<p>&#8220;In this tutorial, we are simply scratching the surface on what&#8217;s available with this new and amazing service.&#8221;</p>\n"
          }
        }
      ]
    }
  }

Excerpt value is an HTML formatted string. In order to render HTML directly, we'll use dangerouslySetInnerHTML property by React.

<div dangerouslySetInnerHTML={{ __html: node.excerpt }}></div>

Now data will render without HTML tags.

Important note:
As the name suggests, dangerouslySetInnerHTML comes with its own risk as input is rendered without sanitization and your page will be vulnerable to cross-site scripting (XSS) attacks. This might be a case with unsafe inputs.