Gatsby: GraphQL Query Options Reference: 404 on Links to CodeSandBox -> Keep Example running

[muescha]

Description

Links to CodeSandBox getting 404, when CodeSandBox App suspends. the app should restarted.

Steps to reproduce

• open https://www.gatsbyjs.com/docs/graphql-reference/
• look at iframes
• or open one of the queries (basic query)

Expected result

• i should see the GraphiQL Explorer

Actual result

• i get an 404 in iFrames
• the GraphQL endpoint https://711808k40x.sse.codesandbox.io/___graphql is not available: 404

Workaround

• i can "restart" the app with going to https://711808k40x.sse.codesandbox.io where i see an deploy script and later the example website.
• now i can reload the docs and see the examples

Note

• i think now you can not see the error because the app is restarted manually
• there is no error until the next time the app is suspended

Screenshots

[iamdarshshah]

Hey @muescha It works for me.

Screenshots:

This is what expected output should look right? Please check it once again and let me know if I am missing out something. Thanks

[muescha]

Note

• i think now you can not see the error because the app is restarted manually
• there is no error until the next time the app is suspended

it works now at this moment because while investigating the 404 error i "manually" started the app again with calling the root url

[iamdarshshah]

Okay, Did the issue still exist? because I tried moving forward with the steps you mentioned above in the steps to reproduce section, but it worked as expected. Now, I think it works well. and regarding there is no error until the next time the app is suspended, can you share the steps to encounter this specific condition?

[muescha]

i don't know when and why the next time this app will be suspended by CodeSandBox -> so i can not estimate when the error will be next time

[muescha]

thats the problem to investigate:

• why it is suspended
• how to avoid
• it's possible to restart while accessing /___graphql and not only with a call to the main root url

[madalynrose]

Hi there @muescha, thank you for reporting this! I can reproduce the problem by looking at that doc. Is this an issue unique to our website or is it rooted in Gatsby itself?

To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[muescha]

it is an error visible on the gatsby side, so i just opened the page at gatsbyjs.org and see the error.

i think the root of the 404 error is a behavior at CodeSandBox: they suspend an app after a time of inactivity.

i think in this case a minimal reproduction is already there:

• the example app is still deployed at codesandbox and
• the iframe with a link to codesandbox is still at the docs page

[muescha]

the missing part here: that an 404 is not generating a restart of the app.
only a call to the root of the example app restart the app at CodeSandBox

[tjcrowder]

As I write this, they're working, presumably because someone manually restarted the app again.

There are other problems with the CodeSandbox integration:

1. It doesn't work by default when using the Brave browser, Brave classifies them as trackers. You have do go "shields down" for them to work or they just stick at Loading... forever.
2. There's a significant lag (2-10 seconds on my fast connection) between the rest of the documentation appearing and the examples appearing.
3. Coming back to a documentation page you've had open in a tab for a while, the code blocks are just missing (literally just white space where they should be) until/unless you refresh the page.
4. The sample code isn't in the page, which is a problem for searches.

Given all of that: although it's really cool and handy when it works, it seems like relying on a third-party service integration for essential documentation is problematic. :-) I suggest including the examples as marked up code in the page itself, and either providing a link to the CodeSandbox live version (expanding it inline in the page or opening a new tab, etc.), or replacing the static code with the live example when it's done loading, if it can be done without reflow and too much of a flash effect.

I like Gatsby a lot so far, but I've found this aspect of the documentation problematic and frustrating -- even before I ran into the 404s. (Sadly, unlike @muescha, I wasn't smart enough to think to look at the page source and go to CodeSandbox directly.)

[github-actions[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! 💪💜

[muescha]

not stale

[John-Di]

I'm seeing 404 as well. Shame. I was really looking forward to this page. It's reason I decided to go through the tutorial from start to finish as I'm pretty new to Gatsby, React and GraphQL as a whole 😅

[muescha]

Would placing an iframe with the root sandbox https://711808k40x.sse.codesandbox.io/ would restart the container from time to time?

[LekoArts]

We've switched the embeds over to Gatsby Cloud so hosting this on our own now. We'll keep them as we think that the documentation makes more sense in this form rather than static code blocks.

The codesandbox and embed to GraphiQL was linked in the first paragraph for a long time now for quicker access :)

Hence I'll close this one.