How to render RAW format of excerpt from WPGraphQL plugin using React
Tags: wordpress, graphql, tutorial, webdev
Published: 2021-08-27 08:17:42

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](https://www.wpgraphql.com/) plugin.
- New to WordPress? WPGraphQL offers an introduction to WordPress for beginners [here](https://www.wpgraphql.com/docs/intro-to-wordpress/).
- A React app. You can use this [built-in toolchain](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) 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:
```jsx
query GetExcerpt {
  posts(where: {}, first: 1) {
    edges {
      node {
        excerpt(format: RAW)
      }
    }
  }
}
```

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

```jsx
{
  "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:

```jsx
{
  "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] (https://www.wpgraphql.com/docs/authentication-and-authorization/#a-quick-word-about-graphql-mutations-vs-queries) 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](https://www.wpgraphql.com/docs/authentication-and-authorization/) the query in your app.
2. Override private flag in admin settings which is described [here](https://stackoverflow.com/a/63468014/11313290).
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:

```jsx
query GetExcerpt {
  posts(where: {}, first: 1) {
    edges {
      node {
        excerpt
      }
    }
  }
}
```
This query will return this data:

```jsx
  "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. 

```jsx
<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](https://en.wikipedia.org/wiki/HTML_sanitization) and your page will be vulnerable to cross-site scripting (XSS) attacks. This might be a case with unsafe inputs.