Wordpress returning HTML symbol codes in GraphQL query in Gatsby website

Question

First, I'm not sure if this is a Wordpress issue, a Gatsby issue, or a GraphQL issue (or something else).

I'm building a Gatsby site using gatsby-source-wordpress to pull content from a self-hosted wordpress site.

I'm building a homepage that queries for the most recent posts and displays the titles along with some other info. If the title has a special character(-, &, etc.) then it returns the HTML code for that character in the title ('&' instead of '&' for instance). Then it gets displayed as the code, which just looks bad. See below for some of my code.

What are my options in terms of getting it to return without the HTML codes or for converting them back to the symbols?

This is the relevant part of the query

export const homepageQuery = graphql`
query homepageQuery {
    mainSection: allWordpressPost(limit: 3) {
      edges {
        node {
          id
          title
          date (formatString: "MMM DD, YYYY")
          featured_media {
            source_url
            alt_text
          }
          slug
          categories {
            id
            name
            link
          }     
        }
      }
    }
}

This is and example of a single post returned

{
  "data": {
    "mainSection": {
      "edges": [
        {
      "node": {
        "id": "d1e9b5e0-bb8a-5e73-a89a-ba73aae92e0d",
        "title": "Stories from the Bus Station Bistro &#038; Creamery",
        "date": "Jul 15, 2018",
        "featured_media": {
          "source_url": "https://www.storynosh.com/wp-content/uploads/2018/07/IMG_9962_3.jpg",
          "alt_text": ""
        },
        "slug": "stories-bus-station-bistro-creamery",
        "categories": [
          {
            "id": "3bceb083-de92-5eff-90f3-e2da524f3c2a",
            "name": "Stories",
            "link": "https://www.storynosh.com/category/stories/"
          }
        ]
      }
    }

This is the component the data ultimately is passed to which renders the data.

class MostRecent extends Component {
    render(){
        const bgimage = `url(${this.props.data.featured_media.source_url})`;

        return (
            <div className={`${styles.featured} ${styles['most-recent']}`} style={{backgroundImage: bgimage}} >
                <div className={styles['article-info-container']} >
                    <h1 className={styles['featured-header']} >{this.props.data.title}</h1>
                    <div>
                        <Link to={this.props.data.categories[0].link} className={styles['category-box-link']}>
                            <span className={styles['category-box']}>{this.props.data.categories[0].name}</span>
                        </Link>
                        <span className={styles['featured-date']}>{this.props.data.date}</span>
                    </div>
                </div>
            </div>
        )
    }
}

What the result looks like

score 1 · Accepted Answer · answered Jul 25 '18 at 13:54

After a bunch of searching around I did come across this post.

Unescape HTML entities in Javascript?

It became the base of my solution.

I added the function in this solution before the return in my component. Then created a variable that ran the function and returned the encoded html.

The following works.

class SecondMostRecent extends Component {
    render() {
        const bgimage = `url(${this.props.data.featured_media.source_url})`

        function htmlDecode(input){
            var e = document.createElement('div');
            e.innerHTML = input;
            // handle case of empty input
            return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
          }

        const title = htmlDecode(this.props.data.title);

        return (
            <div className={`${styles.featured} ${styles['second-most-recent']}`} style={{backgroundImage: bgimage}} >
                <div className={styles['article-info-container']} >
                    <h3 className={styles['featured-header']} >{title}</h3>
                    <div>
                        <Link to={this.props.data.categories[0].link} className={styles['category-box-link']}>
                            <span className={styles['category-box']}>{this.props.data.categories[0].name}</span>
                        </Link>
                        <span className={styles['featured-date']}>{this.props.data.date}</span>
                    </div>
                </div>
            </div>
        )
    }
}

score 1 · Answer 2 · answered May 30 '19 at 01:26

1

Using dangerouslySetInnerHTML solved this issue for me:

Replace: <h1>{this.props.data.title}</h1>

With: <h1 dangerouslySetInnerHTML={{ __html: this.props.data.title }} />

answered May 30 '19 at 01:26

Stafford Rose

769
4
9

2

Well that's a lot cleaner. – Clayton Ingalls May 31 '19 at 12:51

Wordpress returning HTML symbol codes in GraphQL query in Gatsby website

2 Answers2