gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.21k stars 10.33k forks source link

Requests for page-data.json return 404 in client side routes #16097

Closed kirbycool closed 4 years ago

kirbycool commented 5 years ago

Description

Hey team! I've noticed an issue with client side routes recently.

When navigating to client side routes, Gatsby requests the associated page-data.json which returns a 404. For example, navigating to /app/profile loads /page-data/app/profile/page-data.json, which returns a 404 if the /app page has a matchPath of /app/*. This is reproducible in the simple-auth example which has a gatsby-node.js like this:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = `/app/*`

    // Update the page.
    createPage(page)
  }
}

Note this doesn't seem to affect the rendering of the page. It looks like it's still getting the correct page data for the matchPath page even though Gatsby is making a request for different page data.

Steps to reproduce

You can reproduce this in the the simple-auth example.

  1. Clone the simple-auth example
  2. Install the latest gatsby
  3. gatsby build and gatsby serve
  4. Navigate to localhost:9000/app/login

You get some 404s for page-data image

Expected result

Gatsby shouldn't request page-data.json for client side routes.

Actual result

Gatsby requests page-data.json for client side routes and receives a 404.

Environment

System: OS: macOS 10.14.5 CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Shell: 3.0.2 - /usr/local/bin/fish Binaries: Node: 12.3.1 - ~/.asdf/shims/node Yarn: 1.16.0 - ~/.asdf/shims/yarn npm: 6.9.0 - ~/.asdf/shims/npm Languages: Python: 2.7.15 - /Users/thanx/.asdf/shims/python Browsers: Chrome: 75.0.3770.142 Safari: 12.1.1 npmPackages: gatsby: ^2.13.41 => 2.13.41 gatsby-plugin-react-helmet: ^3.0.0 => 3.0.12

FengeRVictor commented 1 year ago

I still have the issue when using CloudFlare ...

jwhubert91 commented 1 year ago

Hello @wardpeet, why is this closed? There are only workarounds here, the issue still happens regularly on our website. We're on gatsby 4.1, the fix that closed this issue was on 2.x.

@Floriferous I'm on 4.25 and still getting this issue. Was there a specific Gatsby version # where this is fixed? Trying to avoid upgrading Gatsby right now since it would involve a lot of tinkering with other packages we've got installed but if there is a later version that does fix the issue I'd love to know so we can look into it.

Dinkelborg commented 8 months ago

"gatsby": "^5.13.1" and this issue is still present I never saw this before not sure what causes this now.

mi-na-bot commented 8 months ago

@Dinkelborg Are you using wildcard paths in your app?

Dinkelborg commented 8 months ago

@minervabot

@Dinkelborg Are you using wildcard paths in your app?

No its a very plain website the only pattern I use are direct requests like <Link to="schirme#schattello" className="image fit"> <StaticImage src="../images/products/schattello.jpg" alt="schattello" imgStyle={{ position: 'relative' }} /> </Link>