-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Loading (Static Query) #6350
Comments
UpdateI can get this api to work in non-page components that are then imported into pages, but at the page level I continue to get the loading message. |
You have both a page query and a staticquery in the same component? |
Right now I am doing a page-level query the old way and then have imported components with static queries being performed in them. If I try to run a |
Curious why you'd want to do both a page query and a |
Oh I don't I'm just saying using a |
Yup running in to the same issue. Is this not the way Also, @rockchalkwushock can you please provide a bit more detail on how you got around this issue? |
Ah just figured out how to make it work based on @KyleAMathews 's response above and this comment from #5473 . Basically, while migrating to v2 we should modify the layout/s from v1 to use the new So removing the |
This seems to be a bug as using a StaticQuery in a page component should work. Demo repo is at: https://github.com/m-allanson/gatsby-issue-6350/ Run |
As seen in gatsbyjs#6350 there is a bug that is preventing `StaticQuery` from working for page components. This PR alerts the reader to this issue, and provides a link to a (not-there-yet-but-soon) article for performing queries at the page level. ![](https://media.giphy.com/media/Ph0oIVQeuvh0k/giphy.gif)
As seen in #6350 there is a bug that is preventing `StaticQuery` from working for page components. This PR alerts the reader to this issue, and provides a link to a (not-there-yet-but-soon) article for performing queries at the page level. ![](https://media.giphy.com/media/Ph0oIVQeuvh0k/giphy.gif)
TODO: When this issue is resolved, remove the warning paragraph from |
@tayiorbeii when you had trouble, did you have both a page query & StaticQuery on the same page? |
@KyleAMathews I did not. This markup results in the const HomePage = () => {
return (
<StaticQuery
query={graphql`
query HomePageQuery {
site {
siteMetadata {
title
description
}
}
}
`}
render={data => <div>{JSON.stringify(data)}</div>}
/>
)
} |
@tayiorbeii ok, thanks! Would you mind putting up a little site reproducing this issue? Something goofy in our babel extraction logic no doubt. |
@KyleAMathews here's a gist, I can see about a site in a bit: https://gist.github.com/tayiorbeii/6582a654746db7493cd0459e7f404b1e also from my
|
Between the gist and @m-allanson 's repo https://github.com/m-allanson/gatsby-issue-6350/ it should be reproduced. |
Hey ya'll, @alexluong has a PR up with a fix to this issue! Anyone want to try it out? #6597 |
@alexluong's fix is published as |
Issue gatsbyjs#6350 is now fixed, so the notice that StaticQuery does not work in pages can be removed.
@sdevil7th we only support one query per file. For the snippet you showed, you can split into two component files to work around this. Another solution is to use You could do something like that: const one = useQueryOne();
const two = useQueryTwo();
const data = bool ? one : two; |
I experienced a similar error with a malformed import. The error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| return (
> <React.Fragment>
| {finalData && render(finalData)}
| {!finalData && <div>Loading (StaticQuery)</div>} The culprit: import { Link } from 'Gatsby' // should be 'gatsby'! |
@jlengstorf documentation describes limit of one |
I had the same issue. You CAN'T export graphql variable. It cause this bug. Reproduced on prod. (on dev mode works good) |
In case someone else is having this issue; I pushed my code without |
@KyleAMathews Can you take a look at this url - trend-d8qyatqwc.vercel.app? It's happening randomly and it's very frustrating. Is there any solution to this? Please guide me. |
I also have the Loading (Static Query) text bug, with a brief flash of the (blurred) image that instantly disappears. Maybe it has something to do with how I use StaticQuery in this component? Is there something fundamentally wrong here?
|
I have a pretty similar issue that @konstantinkopka has I cannot query the siteMetadata from gatsby-config under
|
Please try upgrading to the latest Gatsby. |
@KyleAMathews |
@misakimichy can you create a small reproduction of this that we can look at? This isn't something people are generally running into so we need to understand what combination of factors is causing trouble https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/ |
I experienced this too. That too on a production deployment. However, I could not get it to reproduce consistently as the content loaded properly on subsequent refreshes. |
I've encountered a similar error. I've invested a bit and created a repo to reproduce the error as @KyleAMathews mentioned.
If there's anything else I can do to help solve this, please let me know. Here's the repo: This error happens in dev-mode and production. Steps to reproduce:
[EDIT: added information] |
I got the same problem, is there any fix for it ? |
Also seeing this, seemingly randomly. |
This issue should be reopened as it is now occurring on our production Gatsby Cloud instance. Description Possibly related to: Loading(Static Query) white screen on gatsby build #25920 We run two StaticQueries in two separate components that render on the homepage. Here is the code for them: Gist 1: https://gist.github.com/grahamd711/5855edb75457d804ce1d2c391a019a94 Gist 2: https://gist.github.com/grahamd711/28f62bc44b8abc82e856f14cc7b872df Steps to reproduce There are no errors in the console and nothing to display besides the Loading(StaticQuery) and the white page. This error only occurs on production and not on development. We have tried to clear the cache manually within Gatsby Cloud and the issue still occurs intermittently. Is anyone running into this same problem or have advice on how to fix? Production URL: https://mparticlecomgatsbymain07610.gtsb.io/ Expected result Actual result Environment
|
@KyleAMathews would this Layout file cause issues: https://gist.github.com/grahamd711/44250c718871632b4c9eaaa69a83fe67 |
I have a similar issue here |
Number 1 on your list worked for me. Thanks |
Same issue. |
@KyleAMathews |
trying to build a shopify website. I have a Page component called Shop The ProductGrid component is using a Just having these 2 components was working fine. BUT I want my ProductGrid component to bring in a ProductCard component which also uses a and when I do this the ProductCard Component just shows data as Running Gatsby 3.4.1 |
Hi, I am also having this issue, I upgraded 3.8.0 -> 4.2.0. |
Encountered this issue when trying to display a Gatsby link component with some slug data that I was retrieving from the contentful api with a static query, I was incorrectly setting the data in the links |
Hm, I had this issue popping up all of the sudden. For me, Not really a fix but maybe this helps a person or two. |
Description
When using the new
<StaticQuery />
api I am continually receiving theLoading (Static Query)
message.Steps to reproduce
Expected result
I would expect an
h1
to be returned with my name in the browser.Actual result
I received
Loading (Static Query)
Environment
The text was updated successfully, but these errors were encountered: