Add live examples to the GraphQL reference page #4143
Conversation
ghost
assigned 
|
Deploy preview for gatsbygram ready! Built with commit 2c0e789 |
|
nice! Super excited to see this out there soon! Netlify is failing on the preview build — it said |
|
Ah some of the queries near the end are truncated. I thought I'd fixed that - it's to do with some values in the url not being url encoded. I haven't had time to look into #4093 yet, so editing this page is a bit troublesome. |
|
I'd also like to investigate allowing the iframes to 'break out' to be wider than the rest of the content, but.. one thing at a time :) |
|
This looks great! Would really help in being more indepth and interactive from the tutorial docs itself! @m-allanson @KyleAMathews |
m-allanson
force-pushed
the
graphql-live-examples
branch
from
19b23a6 to
b8f4f6a
Compare
|
@ajayns I'd love to have an easy way to put interactive GraphQL queries all over the docs! So far it's been pretty fiddly to get this set up just for gatsbyjs.org. We'd need to find a way to streamline the process so it's easy to do for any Gatsby site. @KyleAMathews This is ready for a review, although the Netlify preview hasn't updated. I've fixed up the broken links, added a little section at the end and the build issues / flakiness should be fixed by #4291 and #4315. |
|
The Netlify preview has updated: https://deploy-preview-4143--gatsbyjs.netlify.com/docs/graphql-reference/ |
|
This is so cool! Great work, @m-allanson! |
|
This is super exciting! Looks awesome! Let's get it out there 🚀 |
|
Oh random follow-on improvement I thought of is that the iframes could have a "pop-out" icon or button or whatever so people could play with the query in a full-sized window. We could also make the iframes stretch wider than the text column. |
|
|
|
@KyleAMathews I definitely agree on giving the iframes more space, see #4143 (comment) :) I'll open a new issue for improvements to this page. |
* Add live examples to the GraphQL reference page * Fix a query * Fix another query * Slightly less exuberance * Add link to non-iframed GraphiQL and other jumping off points * Copy tweaks
This updates the GraphQL reference page with a series of live examples.
Some of my terminology is probably wrong, and I'm sure there's more sections that can be added.
Refs #3893