Skip to content
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

Add live examples to the GraphQL reference page #4143

Merged
merged 6 commits into from
Mar 1, 2018

Conversation

m-allanson
Copy link
Contributor

@m-allanson m-allanson commented Feb 20, 2018

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

@ghost ghost assigned m-allanson Feb 20, 2018
@ghost ghost added the review label Feb 20, 2018
@gatsbybot
Copy link
Collaborator

gatsbybot commented Feb 20, 2018

Deploy preview for gatsbygram ready!

Built with commit 2c0e789

https://deploy-preview-4143--gatsbygram.netlify.com

@KyleAMathews
Copy link
Contributor

nice! Super excited to see this out there soon!

Netlify is failing on the preview build — it said lodash.isString can't be found which is weird. Lemme try restarting the build.

@KyleAMathews
Copy link
Contributor

🎉

screen shot 2018-02-20 at 1 40 42 pm

https://deploy-preview-4143--gatsbyjs.netlify.com/docs/graphql-reference/

@m-allanson
Copy link
Contributor Author

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.

@m-allanson
Copy link
Contributor Author

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 :)

@ajayns
Copy link
Contributor

ajayns commented Feb 24, 2018

This looks great! Would really help in being more indepth and interactive from the tutorial docs itself! @m-allanson @KyleAMathews

@m-allanson
Copy link
Contributor Author

@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.

@m-allanson
Copy link
Contributor Author

The Netlify preview has updated: https://deploy-preview-4143--gatsbyjs.netlify.com/docs/graphql-reference/

@jlengstorf
Copy link
Contributor

This is so cool! Great work, @m-allanson!

@ghost ghost assigned KyleAMathews Mar 1, 2018
@KyleAMathews
Copy link
Contributor

This is super exciting! Looks awesome! Let's get it out there 🚀

@KyleAMathews KyleAMathews merged commit 3ab063f into gatsbyjs:master Mar 1, 2018
@ghost ghost removed the review label Mar 1, 2018
@KyleAMathews
Copy link
Contributor

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
Copy link
Contributor

screen shot 2018-03-01 at 3 13 18 pm

@m-allanson m-allanson deleted the graphql-live-examples branch March 2, 2018 17:01
@m-allanson
Copy link
Contributor Author

@KyleAMathews I definitely agree on giving the iframes more space, see #4143 (comment) :)

I'll open a new issue for improvements to this page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants