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)(/[^'"]*)["']`