trailingSlash option isn't applied on client-side links when a relative path is specified

[pragmaticpat]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

See : #34205 (comment)

Reproduction Link

https://github.com/wad-im/wadim-on-the-internet

Steps to Reproduce

1. Clone the linked repository
2. Run gatsby develop
3. Hover the first blog post => notice no trailing slash
4. Click the first blog post -> notice no trailing slash in the URL
5. Refresh the page -> notice trailing slash has been applied

Expected Result

The hover and clicked link should both have trailing slashes, as requested in the configuration option trailingSlash: "always"

Actual Result

The hover and clicked link should both lack trailing slashes, even though trailing slash was requested in the configuration option trailingSlash: "always"

Environment

- n/a -

Config Flags

trailingSlash: "always"

[LekoArts]

A way to "fix" this is to add leading slashes to the slug in the frontmatter.

https://github.com/wad-im/wadim-on-the-internet/blob/c4bea721c3972abbe02fbe0fc3454e9395c01e2f/blog/first-post/index.mdx

Because that's why it's not working. So instead of first-blogpost/ it would be /first-blogpost.

Inside gatsby-link we absolutify this path since the check for this is falsy:

gatsby/packages/gatsby-link/src/rewrite-link-path.js

Lines 38 to 40 in f63d13d

	return isAbsolutePath(adjustedPath)
	? withPrefix(adjustedPath)
	: absolutify(adjustedPath, relativeTo)

So after we successfully apple the trailing slash, with absolutify it's gone afterwards.

Our <Link> in the e2e tests all use links with leading slash: https://github.com/gatsbyjs/gatsby/blob/master/e2e-tests/trailing-slash/src/pages/index.js
We should use (for testing purposes) to without a leading slash.

[wad-im]

I tried this quickly and changed one of the slugs from first-blogpost/to /first-blogpost in development only, and now I get a 404 page when I click on the respective link.

Removing any slash from the slug in the frontmatter makes no difference to behaviour described above

[LekoArts]

Because the page you created now has two leading slashes:
https://github.com/wad-im/wadim-on-the-internet/blob/c4bea721c3972abbe02fbe0fc3454e9395c01e2f/gatsby-node.ts#L24

Removing it there and rerunning a build will work. (with path: node.frontmatter.slug)

[wad-im]

Thank you, Lennart. You are of course right and it works like a charm and as expected now.

[LekoArts]

We still wanna fix the version you previously had though, thanks for surfacing this.