Links to homepage still point to WP host after node processing

Hi 👋

I’ve found that urls in links to homepage are not replaced by relative paths on GraphQL node creation. They are still pointing to WP host and not the Gatsby frontend host.

Here’s an example of how links are transformed (I’ll provide endpoint and details at the bottom):

On the image: link to https://wordpress-for-fun.000webhostapp.com/about becomes /about, but https://wordpress-for-fun.000webhostapp.com stays the same.

Possible fix

As I can see, replaceNodeHtmlLinks() here in process-node.js is responsible for checking and replacing links with relative paths in node strings. This RegExp looks for a match:

["']${wpUrl}(?!/wp-content|/wp-admin|/wp-includes)(/[^'"]+)["']

It assumes that the URL should have a path with 1 or more characters after /, which is what + stands for. So homepage path does not match.

I changed + to * to indicate that there can be 0 or more characters, like this:

["']${wpUrl}(?!/wp-content|/wp-admin|/wp-includes)(/[^'"]*)["']

and ran gatsby develop after clearing cache. It seems to have fixed the issue on my website (on a much bigger website, not this example) without any negative side effects. I’ve also ran tests for the plugin in the repo and they pass.

I wanted to make a PR, but still I might have missed some downstream effects that I’m not aware of. Please let me know if my fix is OK. 🙂

Steps to reproduce reduced case

Run gatsby develop with this endpoint as source: https://wordpress-for-fun.000webhostapp.com/graphql

Dependencies:

"gatsby": "^2.30.3",
"gatsby-source-wordpress-experimental": "^7.0.3",
"react": "^16.14.0",
"react-dom": "^16.14.0"

Go to GraphiQL playground on Gatsby’s side and query all page nodes with contents.

query {
  allWpPage {
    nodes {
      content
      title
    }
  }
}

Desired result

All links in page content are replaced with relative paths.

Actual result

All links except for links to homepage are replaced with relative paths.

Proposed fix

In steps/source-nodes/create-nodes/process-node.js change line 798:

- `["']${wpUrl}(?!/wp-content|/wp-admin|/wp-includes)(/[^'"]+)["']`
+ `["']${wpUrl}(?!/wp-content|/wp-admin|/wp-includes)(/[^'"]*)["']`

[TylerBarnes]

@karen-sarkisyan please do 😃 that’d be much appreciated! The contributing docs should be enough to get going but let me know if anything doesn’t work.

[LekoArts]

Hi!

I’m closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support. If this is a feature request, please create a discussion as we moved feature requests from issues to GitHub Discussions.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!