Wordpress возвращает коды символов HTML в запросе GraphQL на веб-сайте Gatsby

Во-первых, я не уверен, что это проблема Wordpress, проблема Gatsby или проблема GraphQL (или что-то еще).

Я создаю сайт Gatsby, используя gatsby-source-wordpress, чтобы извлекать контент с собственного сайта wordpress.

Я создаю домашнюю страницу, которая запрашивает самые последние сообщения и отображает заголовки вместе с некоторой другой информацией. Если в заголовке есть специальный символ (-, & и т. д.), Он возвращает HTML-код для этого символа в заголовке (например, '&' вместо '&'). Затем он отображается как код, который выглядит плохо. Ниже приведены некоторые из моих кодов.

Какие у меня есть варианты, чтобы вернуть его без HTML-кодов или преобразовать их обратно в символы?

Это релевантная часть запроса

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
          }     
        }
      }
    }
}

Это и пример одного возвращенного сообщения

{
  "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/"
          }
        ]
      }
    }

Это компонент, в который в конечном итоге передаются данные, на которые они обрабатываются.

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>
        )
    }
}

Как выглядит результат

wordpress graphql gatsby

24.07.2018 17:56

Как убрать количество товаров в категории WooCommerce

По умолчанию WooCommerce показывает количество товаров рядом с категорией, как показано ниже.

Использование ob_flush() в PHP при ожидании cURL

912

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

После долгих поисков я наткнулся на этот пост.

Отменить экранирование HTML-объектов в Javascript?

Это стало основой моего решения.

Я добавил функцию в это решение перед возвратом в свой компонент. Затем создал переменную, которая запускала функцию и возвращала закодированный HTML.

Следующие работы.

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>
        )
    }
}

25.07.2018 15:54

Использование dangerouslySetInnerHTML решило эту проблему для меня:

Заменить: <h1>{this.props.data.title}</h1>

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

Что ж, это намного чище.

— 31.05.2019 14:51

30.05.2019 03:26