[gatsby-source-wordpress] parse specific symbols

[yaroslav-perec]

I added a tag with a specific character & to the WP Post when I want to display this tag in my gatsby application, instead of getting just & I get &. Can I avoid this behavior?

[wardpeet]

Hi @yaroslav-perec!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[yaroslav-perec]

Hi @wardpeet!

Thanks for the answer! I think this problem is common, I add screenshots that I think can help you understand what the problem is.

My WP post with tag:

My query:

Can you check it locally?

[jonniebigodes]

@yaroslav-perec can you test something out and see if it fixes or at least help you with it, instead of using & can you try using &. Or in other words, you escape the character/entity and see if it's returned correctly.

[yaroslav-perec]

@jonniebigodes

If in WP I create tag R&D it returns as R&D, R & D returns as R & D

[jonniebigodes]

@yaroslav-perec in my previous comment when i asked to use & instead of & i was hoping that Gatsby and Wordpress were both smart enough(pardon the bad pun) to figure out to return the character already decoded. But based on your response it looks like it doesn't. So I think i have a solution for you, you might need to make make some adjustments but at least this issue will probably will be overcome. Below are the steps i took.

• Created a new random post on my local wordpress instalation with a tag matching yours R&D.
• Created a new Gatsby website, based on the hello world starter, to keep it small, just to test out the issue.

• Added gatsby-source-wordpress and configured in gatsby-config.js "pointing" it to my local wordpress. Resulting in:

  module.exports = {
  
  plugins: [
  
  {
    resolve:`gatsby-source-wordpress`,
    options:{
      baseUrl: `localhost/wordpress/`,
      hostingWPCOM: false,
      protocol:`http`,
      useACF:false,
      auth:{},
      verboseOutput: false,
      includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
      ],
    }
  },
  ],
  }

• Added the package unescape, there might be others that could be better suited for the job, but for demonstrational purposes, this did the trick. It's up to you to pick the right one for your needs.
• Modified gatsby-node.js to fetch the data i needed and make the adjustment for this special case with the tags, resulting in the contents being:

const decode = require("unescape")
const path = require("path")

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions
  const templateForWp = path.resolve("./src/templates/blogTemplate.js")
  return graphql(`
    {
      allWordpressPost {
        edges {
          node {
            slug
            title
            content
            tags {
              name
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      throw result.errors
    }
    const { data } = result
    const { allWordpressPost } = data

    allWordpressPost.edges.map(item => {

      createPage({
        path: `/${item.node.slug}/`,
        component: templateForWp,
        context: {
          data_from_wp: {
            title: item.node.title,
            post: item.node.content,
            posttags:item.node.tags!==null?item.node.tags.map(tag=>{
                if (tag.name.includes('&')){
                    return decode(tag.name)
                }
                return tag.name
            }):[]
          },
        },
      })
    })
  })
}

Nothing much different from the standard boilerplate code for a gatsby-node.js file, with the exception being the sanity check for the tags and if there are any, do they contain any special characters in them. All of the data will be injected via Gatsby context prop, i use this as a personal preference and background. I'm biased towards a separation of concerns, to React what is of React, and to Gatsby what is of Gatsby, in short, the component/template/page should only do one job, which is to render what i supplied and gatsby-node.js to fetch all the data either using graphl or rest and supply it where it's needed.

Moving on

• Created a template called blogTemplate.js under src/templates with the following code:

import React from 'react';

const BlogTemplate= props=>{
    const {pageContext}= props
    const {data_from_wp}= pageContext

    return (
        <div>
            <h1>{data_from_wp.title}</h1>
            <div style={{border:'2px solid rebeccapurple', margin:'0.8rem'}}>
                This is the content:
                <div>
                    <div dangerouslySetInnerHTML={{ __html: data_from_wp.post }} />
                </div>
                <div>
                    Tags:
                    <ul>
                        {
                            data_from_wp.posttags.map(item=><li>{item}</li>)
                        }
                    </ul>
                </div>

            </div>
        </div>
    )
}
export default BlogTemplate

Issued gatsby develop, waited for the process to complete and opening up the url with the post with special characters showed me the following:

Feel free to provide feedback so that we can close this issue, or if not resolved, to continue to work on it until a solution is found

[yaroslav-perec]

@jonniebigodes

Works! Great thanks for the work done! I think this issue can be closed.

[isengartz]

Hello the same issue exists in post categorie's title too. In Wordpress I have a post category named "Website & Eshop" and in Gatsby it gets replaced to Website & Eshop. In the above example @jonniebigodes save the tags in the context of the Post. I show the category / categories of a post in like 4-5 pages. I think that saving all of categories as context in all above pages is a bit hacky and doesnt sound good. Is there a way to add this functionality to source-plugin directly?

[jonniebigodes]

@isengartz when this issue was created the issue with special characters existed, but looking at what you mentioned it looks like the category data is correct and the special character is working as it should.

The solution i supplied was meant was a way to try and solve the original issue. And don't take me wrong but i don't see it that way, like i said in my response earlier i'm more inclined to make a separation of concerns, by having gatsby-node fetch all the data needed and the page/components only care about displaying it, with that removing the need of an extra graphql query in the page/component for each page. And with that i take full advantage of the gatsby special prop context. And if you don't mind elaborating a bit more on this:

I think that saving all of categories as context in all above pages is a bit hacky and doesnt sound good. Is there a way to add this functionality to source-plugin directly?

From my read on this, a possible solution that probably would suit your needs is to take the same approach as the how it's used by gatsby in the wordpress example and by that you simply fetch the necessary information in gatsby-node.js and in the template component you fetch the information regarding that page/post.

[isengartz]

@jonniebigodes Sorry, I didnt see that github replaced the Website & Eshop to Website & Eshop . I edited my comment above. My bad!

From my read on this, a possible solution that probably would suit your needs is to take the same approach as the how it's used by gatsby in the wordpress example and by that you simply fetch the necessary information in gatsby-node.js and in the template component you fetch the information regarding that page/post.

I already modified everything like that in my project, although I think that the same issue with the special chars that I mentioned for Post Categories will probably exist for other entities too.

[jonniebigodes]

@isengartz no need to apologize, github can be sneaky at times.

From what you said and the original issue description it could be that the problem exists in more than one place, or in other words more than one entity like you said. I haven't checked it fully. But if you want, read the contribution docs, fork the repo, make the necessary adjustments to the plugin in question and submit a pull request, don't forget to mention this issue when you do.