Gatsby: Create a page with multiple paths?

[ImedAdel]

Summary

The current project I'm working on requires three paths for the same page. My current solution is creating a different page (through actions.createPage() with the same content for every path, however, this approach easily makes a 400-page website behave like a 1200-page one. The building becomes super slow and the size of the website is really big.

What are my options here?

[rroslaniec]

We also have this problem - but with A/B testing. In our case if user comes to our site with query param - he got different page.
So we almost done this by serving different html (different page) in nginx, but still - on client gatsby redirects us to "correct" page path. It will be cool if we will be able to disable redirects

[ImedAdel]

Definitely, redirects are not a suitable solution for this. Having client-side routes that mask the actual URL would be a good alternative.

[eladams]

I'm using version 2.8.2 of gatsby and when creating the page I've configured the page with (example):

{
    path: '/books/:id'
    ...
}

from some reason this stopped working in version 2.13.10

[wardpeet]

what's the usecase to have a page with multiple paths? Could you use redirects to point to the same page?

1200 page shouldn't be too slow. We have a few things to speedup gatsby as we have fallen in a few regressions. Any code would be appreciated.

@eladams
could you create a new bug for your issue? It seems like a regression in our router code. We did push a fix https://github.com/gatsbyjs/gatsby/pull/15457 in gatsby 2.13.10.

[ImedAdel]

I don't understand the use case either, but that's a requirement for the project (summary: a Gatsby revamp of some PHP web apps with multiple paths for the same page).

I haven't discussed redirects yet, as they seem to prefer distinct paths with the same content. But, just in case, how would I programmatically redirect from say /${lang}/${id}/${title} to /${title}-${id}-${lang}? And what about from /${title} to /${title}-${id}-${lang}? The documentation about redirecting pages is kind of limited. I outlined the methods that I found to work on my blog, and a suitable solution seems to be actions.createRedirect, which is not documented well enough.

1200 is the minimum, it's usually way more than that. Since every page needs to run a page query, I ended up running one query in gatsby-node.js and passing the result through context. This still takes some considerable time for some reason. Is there another thing that I can do to enhance speed?

By the way, this project relies on connecting to a MySQL database in build time.

Thank you :)

[eladams]

@wardpeet I think this issue/bug goes back to 2.9.X

[eladams]

@wardpeet I've opened a bug report regarding the regression from 2.8.2: https://github.com/gatsbyjs/gatsby/issues/15606

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[ImedAdel]

So, for anyone looking for a quick solution. Just put your path in an array and loop over them.

I thought about making a PR to allow path to accept both a string and an array of strings, however, it would work the same way as iterating over paths in gatsby-node.js.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[dlangsam]

@ImedAdel We also have this issue. Do you have an example of your solution?

[ImedAdel]

@dlangsam That was for my internship and I really forgot the details, but I think what I did was that I defined an array with all the paths ["/path1", "/path2", "/path3"], I looped over it using forEach, and I ran actions.createPage().

;['/path1', '/path2', '/path3'].forEach(path => {
  actions.createPage({
    path: path,
    component: yourComponent,
    context: {}
  })
})

Initially, I didn't want to have to generate duplicate pages with different paths, however, that appeared to be impossible with Gatsby.

[Kuboczoch]

Gatsby should support multiple paths or aliases

For now this is the best solution for that problem:

@dlangsam That was for my internship and I really forgot the details, but I think what I did was that I defined an array with all the paths ["/path1", "/path2", "/path3"], I looped over it using forEach, and I ran actions.createPage().

;['/path1', '/path2', '/path3'].forEach(path => {
  actions.createPage({
    path: path,
    component: yourComponent,
    context: {}
  })
})

Initially, I didn't want to have to generate duplicate pages with different paths, however, that appeared to be impossible with Gatsby.

[eggers]

@ImedAdel That's not a fix, it's a workaround.