Gatsby: Page Name other than english language are not generated

[ghost]

Summary

Relevant information

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

I have below wordpress pages with page name in 4 different languages:

/تركيا/
/tурция/
/ترکیه/
/turquie/ - Only this page generated, rest of the above pages not generated.

What do I need to do so that gatsby can also generate wordpress pages that contains page name in language/alphabets other than english.

[TylerBarnes]

Hi @expatguideturkey!

Sorry to hear you're running into an issue. I'm not sure if this is a Gatsby problem or a WordPress problem. 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! 💜

[ghost]

Hi @expatguideturkey!
Sorry to hear you're running into an issue. I'm not sure if this is a Gatsby problem or a WordPress problem. 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! 💜

Hi @TylerBarnes thank you for your response. Below is my repro link: https://github.com/expatguideturkey/expat-repro.git
if you browse below pages:

Pages in 4 different Languages
Arabic /تركيا/
Russian /tурция/
Francais /turquie/- only this page generates as it has English alphabets in the url/path
Persian /ترکیه/

[ghost]

Hi @TylerBarnes have you checked my repro. Any idea how to fix this issue.

[ghost]

@TylerBarnes @jasonbahl have you guys find any solution to this bug. What I need to do, please reply.

[ghost]

There is also no plugin here for multilingual on Gatsby website.
https://www.gatsbyjs.org/packages/gatsby-plugin-multilingual/

If I click on these links I get below Error:
"There's not a page yet at /t%D1%83%D1%80%D1%86%D0%B8%D1%8F/

[TylerBarnes]

Hi @expatguideturkey , the whole team has been away for the last week or so as we were in LA for Gatsby Days and the Gatsby internal gathering.
I just checked out your repo on the plane home, and I was able to fix the problem for you. Luckily the solution is quite simple!
https://github.com/TylerBarnes/expat-repro

When you're creating your pages, you should use decodeURIComponent() to decode those garbage url strings back into nice looking characters :)

For example, you could use this code to solve the problem and observe the fix in your console:

  allWordpressPage.edges.forEach(edge => {
    if (edge.node.status === "publish") {
      // original path
      console.log(edge.node.link)
      const path = decodeURIComponent(edge.node.link)
      // decoded/fixed path
      console.log(path)
      createPage({
        path,
        component: slash(pageTemplate),
        context: {
          id: edge.node.id,
          parent: edge.node.wordpress_parent,
          wpId: edge.node.wordpress_id,
        },
      })
    }
  })

I'm going to close this issue, but please let me know if you need any additional help!

[ghost]

Hi @TylerBarnes thank you for your response. I tried this on posts as well but they are not loading

localhost:8000/ثقافة-واخلاق-شرب-القهوة-التركية

Below is the code I am using:

_.each(result.data.allWordpressPost.edges, edge =>{
    const path = decodeURIComponent(edge.node.link)
    createPage({
      //path: `${edge.node.link}`,
      path,
      component: slash(postTemplate),
      context: {
        id: edge.node.id,
        relatedPosts: getRelatedPosts(edge.node, result.data.allWordpressPost.edges),
      },
    });
  });
};

[ghost]

Hi @TylerBarnes can you please check above code, the posts URL are not generating and I have to publish site online tomorrow.

[TylerBarnes]

@expatguideturkey , you need to use decodeURIComponent for your posts as well. If you do that it will work, I've tried it with your repo locally

[TylerBarnes]

Ah, sorry, I missed your last comment before that. Your screenshot shows me that it's working. You have a blank page at that url so it exists. Check your browser console for errors.

[TylerBarnes]

Just had a look to help get you unstuck. It's because your RecommendedPosts component has a bug. If I comment it out the post component renders.

[ghost]

component

Thanks @TylerBarnes for your prompt response, can you please share the bug you identified in RecommendedPosts component.

[ghost]

@TylerBarnes I also checked on GraphQL it shows weird characters in slug https://prnt.sc/r4f5vt

[TylerBarnes]

@expatguideturkey , you'll have to debug your React code yourself as this issue is about a potential Gatsby bug and a solution has been provided. WordPress sends over special characters as URI encoded which is why you see that in the slug. You'll need to decode them the same way I mentioned above.

[ghost]

@expatguideturkey , you'll have to debug your React code yourself as this issue is about a potential Gatsby bug and a solution has been provided. WordPress sends over special characters as URI encoded which is why you see that in the slug. You'll need to decode them the same way I mentioned above.

Hi @TylerBarnes I checked it again by removing the RecommendedPost.js locally but its not loading after long time it loads. If there is any bug in my code why the English content loads faster and not the other language content, See the below screenshot of my live site, it took 8.95s for it the content to get load, English content loads in 0.18s. I have also updated RecommendedPost.js code and ıt has no bug.

You can check my new repro to have a look. There is some issue with rendering posts with Url in different language. Either it doesn't load or if it loads it takes long time to load after multiple refresh. Please see this issue.