gatsby: Client only routes - Query not run warning
Description
I’m seeing the following errors and warnings for pages that are only rendered on the client. They are not using any queries, just plain ole react components fetching data from a rest api.
Warning in the terminal:
Error loading a result for the page query in "/app/overview". Query was not run and no cached result was found.
Page not found /app/overview
In the Browser after build:
prefetch.js:33 GET http://MYDOMAIN/page-data/app/faqs/page-data.json net::ERR_ABORTED 404 (Not Found)
@LekoArts is also seeing this issue, which you can see here: https://tmdb.lekoarts.de/
Steps to reproduce
I’ve tried to replicate the issue with the client-only-routes example. Alas I could not reproduce the error.
Expected result
No warnings or errors in the browser.
What should happen?
As above, no errors or warnings.
What happened.
The errors described above
Environment
System: OS: macOS 10.14.5 CPU: (8) x64 Intel® Core™ i7-6820HQ CPU @ 2.70GHz Shell: 5.3 - /bin/zsh Binaries: Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node Yarn: 1.16.0 - /usr/local/bin/yarn npm: 6.9.0 - ~/.nvm/versions/node/v12.6.0/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 75.0.3770.100 Firefox: 67.0.4 Safari: 12.1.1 npmPackages: gatsby: ^2.13.2 => 2.13.2 gatsby-cli: ^2.7.7 => 2.7.7 gatsby-plugin-create-client-paths: ^2.1.1 => 2.1.1 gatsby-plugin-postcss: ^2.1.0 => 2.1.0 gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 42 (24 by maintainers)
@wardpeet:
page-data/client-path/something/page-data.js
,page-data/404.html/page-data.json
andpage-data/client-path/page-data.js
are sequential, meaning that on high-latency connections people now has to between 1 (for thesomething
part) and 3 (for all 3 parts) round-trips to get their page, instead of between 1 (for theclient-path
) and 0. Note: there is no prefetching when younavigate
to some client url (which should be fine to do for whatever reason we need to).I understand you cannot solve this generally without going back to full-site manifests (which you understandably don’t want to do) or breaking mixed client/static URLs.
However, many of us would be able to solve it for our particular cases if you give us some kind of “escape hatch”. In our case, we are using a routing scheme, meaning that we have just ~60 url patterns (that end up generating several thousand pages). We load those patterns in all pages because reasons, meaning that we can very easily verify if some url is a client path or a static path.
Here are two alternatives that would allow us to solve this issue:
Just add a browser api
isClientPath(path: string): boolean
that we can implement, and skip the fetching if you get true from there. This should be easy to implement and wouldn’t complicate the logic much on gatsby’s side.Add a new page property
pathCapture: boolean
or similar that, when set to true means that anything matchingmatchPath
does not have static pages. Skip the extra request logic for those paths. I think this is more complicated for everyone to implement, but it should work if you prefer it for some reason.All in all, please don’t just dismiss this as a non-issue because it is for some of us.
@colbyfayock what problem do you see with 404s? Users won’t see those 404s and it won’t change their experience on your site.
Confirming on
2.13.59
i’m not seeing the terminal messages in develop mode. Thank you for this.I am however still seeing the 404 in the console on deploy.
is the official Gatsby position on this “Won’t Fix” even with all of the other concern here? @wardpeet @freiksenet Otherwise this should be left open as it was partially fixed or a new issue with that specific concern, as OPs description included that as an issue, among the rest who commented.
You mentioned previously about this being a plugin fix (gatsby-plugin-create-client-paths?), if it’s being tracked somewhere else, I would be happy to migrate my subscription over there, as I’d just like to see this resolved in my apps. Thanks
Hey Colby!
Thanks for your message, and while we understand your frustration, we (Gatsby) don’t necessarily see it as a bug. The downside of making network requests and returning a 404 are negligible. The extra overhead it creates is not mitigated by the potential downside you’re experiencing.
Exposing a plugin to solve your particular issue seems like a fair compromise. Fixing the bug in core would mean less upside for other use-cases, so we’d prefer to expose this fix in a plugin to give you an escape-hatch to solve the issue.
Thanks!
I can confirm, I am still seeing errors in the browser console.
I don’t think this should be closed if part of the issue is still active
namely: “prefetch.js:33 GET http://MYDOMAIN/page-data/app/faqs/page-data.json net::ERR_ABORTED 404 (Not Found)”
makes sense, thanks for the info.
whether or not that solution, is the plan definitely to address this in one form or another? i would have to imagine client paths are a common use case all around, especially given if I’m not mistaken, Gatsby is trying to position itself as an all around app solution rather than just a static site generator. receiving a bunch of 404’s in a dynamic application doesn’t seem like something to just ignore
@wardpeet
This seems a bit odd to be honest. If Gatsby is billed as a solution for client side apps as well as static sites then this should surely be classed as a bug. However, I do agree that exposing a plugin is probably the best way to resolve this issue.
Updating to
2.13.59
removes the warnings locally* 👍 thanks @freiksenet & @wardpeet !!! ❤️Edit: Still warnings in console after build/deploy
This
A plugin feels like a bandaid though to an actual problem 🤔
@kilburn I’m experiencing the same issues you have mentioned, especially item number 4 in your list.
The 3 requests you describe and the 404 requests/abort are slowing down my authenticated routes in production test on Netlify.
It is tripping me up as I dev as well.
@karldanninger Thanks!
I’ll def test that out.
For now, I did fix the 404 flash. I’m using Netlify and I didn’t install the gatsby-plugin-netlify add-on that basically fixes redirects under the hood.
After that the 404 flash appears to be solved.
@break-paradigm I’ve encountered the flashing 404 thing myself. Doing this solved it for me https://github.com/gatsbyjs/gatsby/issues/5329#issuecomment-484741119
@wardpeet well, this is my 2c…
For one, it seems like it’s an acknowledged problem where the known solution would break something else, meaning the “won’t fix” is just that there’s not currently a known valid solution. I mean I get it, and thats a totally valid reason for not doing the fix that you know of, so that it wont break other things, but i dont think that means it should be shrugged off as “how it is”. it’s not a normal side effect of an application. clearly other people see it as a problem too hence the commenting 🤷♀️
Does this get collected with error tracking integrations such as Sentry? I can’t speak towards whether it does or not (looking to integrate a tool like this soon), but if it does, that’s just adding lots of unnecessary logs for folk’s logging, where in the logging world, that means more 💸
Additionally, it just generally clogs up the console in the browser making it more difficult to debug real errors, being able to tell what’s real or broken. We use this feature (and I’m sure we’re not alone) to handle client side dynamically generated routes from search results, meaning when the results come back, it’s a ton of 404 spam in the console.
Agreed it may not be visible to the user, but it’s still creating additional network traffic (though small for each) and using resources that aren’t needed to make and handle that request. speaking without evidence, it may be more noticeable on slower devices with poor internet connectivity
That all said, I’d be curious to hear if anyone else has any thoughts.
Thanks for hearing me out 😃
Seems a few others are having similar issues.
@himynameistimli:
@eknowles
Closing as duplicate
Thanks, we are investigating this!