Gatsby: Next and previous slugs need forward slashes otherwise they take the relative path and produce a double slug in the url

[molebox]

Description

When using the next and previous nodes to get the slugs they are flat strings. If these are then passed to GatsbyLink they resolve to the relative path, that is, they will create a double slug in the url. As you can see below, the fields slug has the forward slash at the beginning where as the next and previous do not.

            "fields": {
              "slug": "/a-separation-of-concerns/"
            }
          },
          "next": {
            "slug": "atomic-design-and-storybook"
          },
          "previous": {
            "slug": "add-texture-to-a-cube"
          }

The fix is to manually add the slash to the GatsbyLinks to prop:

to={`/${previous.slug}`}
to={`/${next.slug}`}

Expected result

This is how i would expect it to look:

            "fields": {
              "slug": "/a-separation-of-concerns/"
            }
          },
          "next": {
            "slug": "/atomic-design-and-storybook/"
          },
          "previous": {
            "slug": "/add-texture-to-a-cube/"
          }

Actual result

This is how it currently looks:

            "fields": {
              "slug": "/a-separation-of-concerns/"
            }
          },
          "next": {
            "slug": "atomic-design-and-storybook"
          },
          "previous": {
            "slug": "add-texture-to-a-cube"
          }

Environment

System:
OS: Windows 10 10.0.18363
CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
Binaries:
Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.15 - /c/Python27/python
Browsers:
Chrome: 86.0.4240.198
Edge: Spartan (44.18362.449.0)
npmPackages:
gatsby: ^2.25.3 => 2.25.3
gatsby-plugin-chakra-ui: ^0.1.4 => 0.1.4
gatsby-plugin-google-analytics: ^2.5.0 => 2.5.0
gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
gatsby-plugin-manifest: ^2.5.2 => 2.5.2
gatsby-plugin-mdx: ^1.3.1 => 1.3.1
gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0
gatsby-source-filesystem: ^2.4.2 => 2.4.2
npmGlobalPackages:
gatsby-cli: 2.14.0
gatsby-theme-pocket: 0.3.3

[laurieontech]

Thanks for filing the issue. However, this is intended behavior, so I'm going to close it for now.

[molebox]

Thanks for filing the issue. However, this is intended behavior, so I'm going to close it for now.

Hey Laurie, just wondering what the intended behavior is then? The next and previous slugs should be used to paginate your posts right? And they should be used with gatsby link.

Am I missing something here? Maybe I do t understand how to do this correctly then...

[laurieontech]

This slug field was added in part to support the Route API which takes a string to generate the slugs for each page. So it can support your use case, but it does require prepending the slash.

[molebox]

This slug field was added in part to support the Route API which takes a string to generate the slugs for each page. So it can support your use case, but it does require prepending the slash.

Ahh right, ok. Thanks for clarifying! 😊