feat(gatsby): GraphQL playground #11193

Saifadin · 2019-01-21T15:58:59Z

Description

A PR that adds the Prisma Playground to the Gatsby Build process alongside GraphiQL.

Related Issues

TO-Dos

Install graphql-playground-middleware-express
Add /___playground route
Add Gatsby Theme
Add to documentation

Saifadin · 2019-01-21T16:00:23Z

@sidharthachatterjee @HuVik here it is, will still add the Theme and the documentation. My colleague is making a contrast-rich theme design, that I will add, so it can be tweaked.

LekoArts · 2019-01-21T16:09:28Z

The path ___graphql should stay the same. You can replace GraphiQL with Playground but the former should stay the same - otherwise this would be a breaking change and a lot of articles/tutorials would be outdated.

Saifadin · 2019-01-21T16:12:30Z

@LekoArts yeah I was thinking the same, that is why I kept GraphiQL on /___graphql and added /___playground or where you referring to the console.log? That one should mention both of them I think.

LekoArts · 2019-01-21T16:15:45Z

No, what I meant is: Do a complete switch over to Playground but keep the same URL. That wouldn't be a breaking change IMO as just the interface changes. You can remove GraphiQL. At least that is what @freiksenet said.

Saifadin · 2019-01-21T16:16:49Z

Ahh got it, will do that 👍🏽

Saifadin · 2019-01-21T16:31:08Z

@LekoArts done

Saifadin · 2019-01-21T17:18:56Z

Added a Custom Theme for Gatsby, what do you guys think of this? We tried to stick to the Gatsby colors.

Another option would be this a little bit darker color scheme

huv1k · 2019-01-21T18:12:30Z

@Saifadin It looks nice :) You can even change editor color scheme. And I see there is an old playground inside. There is right now hardcoded bad version of the playground, but I will remove it in the new release so there is always up to date version.

Saifadin · 2019-01-21T18:27:07Z

Thank you^^
It was quite hard to find out which color goes where. Some kind of documentation would be beneficial, but I also noticed, that in the playground-html lib the type of codeTheme is incomplete. Made it harder to code 🤷🏽‍♂️

huv1k · 2019-01-21T18:33:05Z

@Saifadin Yea, there is space for improvements, but basically code editor follows basic Codemirror theme, so any theme working with code mirror should works. If its remapped to object. But I agree right now there is a mess I should fix it asap.

Saifadin · 2019-01-21T21:58:10Z

@HuVik Glad to help, if you can point me to a list of main issues :)

packages/gatsby/src/commands/develop.js

Co-Authored-By: Saifadin <osamah@aldoaiss.de>

sidharthachatterjee · 2019-01-22T16:15:20Z

Added a Custom Theme for Gatsby, what do you guys think of this? We tried to stick to the Gatsby colors.

Another option would be this a little bit darker color scheme

I think accessibility might be an issue here

cc @fk

Saifadin · 2019-01-22T16:56:51Z

@sidharthachatterjee can you elaborate?
The Colors in this Theme are all AAA from a color contrast.

Would love to hear your concerns in more detail.

m-allanson · 2019-01-22T18:05:07Z

I haven't had a chance to try this out yet, but it looks great!

I'm not 100% sold on straight up replacing GraphiQL with Playground, at least not in a minor release. I also think including GraphiQL and Playground would be confusing. Could we do a gradual rollout, first by enabling Playground via an env var?

This would let you do GATSBY_GRAPHQL_IDE=playground gatsby develop to use Playground right now (well, not right now but as soon as this PR is released).

Then we could switch Playground to be the default in the next major release of Gatsby, before finally removing GraphiQL in a later version. I think this would give us a nice balance of enabling the new goodness for people that want it while letting us work through any issues and avoiding disrupting people's existing workflows.

Here's an example where we've done that for the node db that Gatsby uses internally.

Theming

Theme choices are always going to be somewhat subjective, for this PR I'd prefer to stick with the default theme. We can then use a follow up PR to work out a better theme, as the theme is not directly related to making this PR mergeable. This is also a nice benefit of enabling Playground behind a feature flag to start with - while it's feature flagged we can let people try it out and provide feedback, and don't need to worry too much about changing things until it's un-feature-flagged.

Personally I'd like a theme that's very similar to the existing GraphiQL theme. There are a lot of guides and tutorials about Gatsby that have GraphiQL screenshots in them, anything we can do to avoid them looking outdated is going to be an overall win for the community. But I'd be happy to be convinced that a light theme is a bad idea :)

Saifadin · 2019-01-22T23:15:29Z

Concerning the gradual release, I kind of agree. It is too big a change for a minor release. A sudden change might be surprising, especially for people not closely following the news etc, so adding it behind an environment variables is a great way.

Basically these steps:

Opt-In through environment variable and mentioning this possibility
Deprecating GraphiQL in the next major release, while giving an opt-in possibility to it and updating docs with new images
Next major release after that, remove it

Theming

If we use a gradual release, then I would put the custom theme aside for now and use the default.

Concerning light vs dark theme I think it subjective, but we can add a note in the docs, that it is changeable in the editor settings in the playground, by changing "editor.theme": "dark" to "editor.theme": "light".
If it is behind a feature flag, adding a dark theme is I think less of a problem. The moment we make it the default option, it might be necessary to make this discussion in detail.

So for now I am removing the custom theme from this PR, but I will be waiting for other feedback from the other Reviewers to the feature-flag discussion 😄

LekoArts · 2019-01-23T10:18:50Z

So for now I am removing the custom theme from this PR, but I will be waiting for other feedback from the other Reviewers to the feature-flag discussion

Yeah, sorry for the confusion. What Mike said is probably the best solution to this

fk · 2019-01-23T12:41:16Z

Great to see this happening @Saifadin!

Re: the theme — I love that you put in the work for a dark Gatsby theme (and took care about accessibility; I briefly checked the (blurry) JPGs and only saw AA contrast values for the two or three things I measured)!

That said, @m-allanson's comments regarding theming and the general plan to move forward make a lot of sense to me — there's enough work to take care of in terms of UX which does not concern the visual appearance. It makes sense to me to move incrementally — get the foundation done first, and then add the "theme" icing-on-the-cake in a separate step. This unblocks this PR from discussions regarding the latter.

I'd personally love to have both light and dark themes available.
Your working regarding the dark theme is a great foundation to build upon and I like to think it wasn't made in vain!

Saifadin · 2019-01-23T13:30:58Z

Thanks a lot @fk ^__^

When we created the theme in Sketch it showed us AAA, but we would need to tweak it when we work on the theme in the future, for which I will create a second PR after this one is accepted.

Like I said, light and dark themes exist out of the box, which could also be indicated by an ENV variable maybe?

@m-allanson and the rest: If there are no big blockers, I will start implementing an env based solution today.

fk · 2019-01-23T13:57:43Z

@Saifadin 🤗

I briefly checked the (blurry) JPGs and only saw AA contrast values for the two or three things I measured)

That sentence didn't come out correctly, and I forgot to mention that I think that I do not see AAA is due to the blurryness of the image. Sorry for making it sound like I wanted to say "the AAA contrast values you talked about aren't there" — that really wasn't my intention at all! 🙏

Super cool to hear that you went through the effort of using Sketch to design the theme!

Saifadin · 2019-01-23T14:00:03Z

All good ^^
Not me, but my UI designer colleague did it together with me. He is ready to rework it in the later PR.^^

sidharthachatterjee · 2019-01-24T14:27:11Z

packages/gatsby/src/commands/develop.js

@@ -92,13 +94,19 @@ async function startServer(program) {
      heartbeat: 10 * 1000,
    })
  )
-  app.use(
+  app.post(


This is a breaking change since GET requests to /___graphql with Accept: application/json which currently work will break as a result of this

I was not aware of that, good catch.
But then I am confused about how I can use the same Url for two gets. Once for playground UI and for the GET requests.

Can you have another look, it should work now

sidharthachatterjee · 2019-01-24T14:29:23Z

@Saifadin Looks like @fk addressed the accessibility concerns and shouldn't be an issue since we're releasing under a flag 🙂

Left a comment about the change from app.use to app.post being a breaking change

Saifadin · 2019-01-27T00:19:55Z

Added to the documentation

What is the status here?

huv1k · 2019-01-28T11:47:56Z

@Saifadin There is a new version of the playground, could you please upgrade middleware version? 😇

pieh · 2019-01-28T18:22:13Z

What is the status here?

Need some time to verify the change locally. Code looks good.

Saifadin · 2019-01-28T19:34:31Z

@HuVik done :)
@pieh Got it 👍

docs/docs/using-graphql-playground.md

Co-Authored-By: Saifadin <osamah@aldoaiss.de>

docs/docs/using-graphql-playground.md

Co-Authored-By: Saifadin <osamah@aldoaiss.de>

pieh

Verified locally, and works as expected. Thanks @Saifadin for this PR!

Saifadin · 2019-01-29T15:29:53Z

It was a pleasure 🎉

gatsbot · 2019-01-29T16:44:32Z

Holy buckets, @Saifadin — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

Saifadin added 2 commits January 21, 2019 16:51

Add playground to the develop command

73b8f6f

reactivate GraphiQL

dd2f852

Saifadin requested a review from a team as a code owner January 21, 2019 15:59

Use the same route for GraphQL and Playground

0fb45fa

Add Gatsby Theme for Playground

96d816c

glennreyes reviewed Jan 21, 2019

View reviewed changes

packages/gatsby/src/commands/develop.js Outdated Show resolved Hide resolved

packages/gatsby/src/commands/develop.js Outdated Show resolved Hide resolved

Apply suggestions from code review

5bd98b5

Co-Authored-By: Saifadin <osamah@aldoaiss.de>

Remove Custom Theme

ce0562f

LekoArts changed the title ~~Topics/playground~~ feat(gatsby): GraphQL playground Jan 24, 2019

sidharthachatterjee reviewed Jan 24, 2019

View reviewed changes

Saifadin added 3 commits January 24, 2019 22:26

Add environment flag for playground

47672e8

Let Playground run on the same route as get+post

56ef0d7

add to docs

15afdda

Saifadin requested a review from a team January 27, 2019 00:18

upgrade to graphql-playground-middleware-express@1.7.10

0f58164

pieh self-assigned this Jan 29, 2019

pieh reviewed Jan 29, 2019

View reviewed changes

docs/docs/using-graphql-playground.md Outdated Show resolved Hide resolved

Update docs/docs/using-graphql-playground.md

b11e7f6

Co-Authored-By: Saifadin <osamah@aldoaiss.de>

pieh reviewed Jan 29, 2019

View reviewed changes

docs/docs/using-graphql-playground.md Outdated Show resolved Hide resolved

Update docs/docs/using-graphql-playground.md

efa5f71

Co-Authored-By: Saifadin <osamah@aldoaiss.de>

pieh approved these changes Jan 29, 2019

View reviewed changes

pieh merged commit 2b1b551 into gatsbyjs:master Jan 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gatsby): GraphQL playground #11193

feat(gatsby): GraphQL playground #11193

Saifadin commented Jan 21, 2019 •

edited

Saifadin commented Jan 21, 2019

LekoArts commented Jan 21, 2019 •

edited

Saifadin commented Jan 21, 2019

LekoArts commented Jan 21, 2019

Saifadin commented Jan 21, 2019

Saifadin commented Jan 21, 2019

Saifadin commented Jan 21, 2019 •

edited

huv1k commented Jan 21, 2019

Saifadin commented Jan 21, 2019

huv1k commented Jan 21, 2019

Saifadin commented Jan 21, 2019

sidharthachatterjee commented Jan 22, 2019

Saifadin commented Jan 22, 2019

m-allanson commented Jan 22, 2019

Saifadin commented Jan 22, 2019

LekoArts commented Jan 23, 2019

fk commented Jan 23, 2019

Saifadin commented Jan 23, 2019

fk commented Jan 23, 2019 •

edited

Saifadin commented Jan 23, 2019

sidharthachatterjee Jan 24, 2019

Saifadin Jan 24, 2019

Saifadin Jan 24, 2019

sidharthachatterjee commented Jan 24, 2019

Saifadin commented Jan 27, 2019

huv1k commented Jan 28, 2019

pieh commented Jan 28, 2019

Saifadin commented Jan 28, 2019

pieh left a comment

Saifadin commented Jan 29, 2019

gatsbot bot commented Jan 29, 2019

feat(gatsby): GraphQL playground #11193

feat(gatsby): GraphQL playground #11193

Conversation

Saifadin commented Jan 21, 2019 • edited

Description

Related Issues

TO-Dos

Saifadin commented Jan 21, 2019

LekoArts commented Jan 21, 2019 • edited

Saifadin commented Jan 21, 2019

LekoArts commented Jan 21, 2019

Saifadin commented Jan 21, 2019

Saifadin commented Jan 21, 2019

Saifadin commented Jan 21, 2019 • edited

huv1k commented Jan 21, 2019

Saifadin commented Jan 21, 2019

huv1k commented Jan 21, 2019

Saifadin commented Jan 21, 2019

sidharthachatterjee commented Jan 22, 2019

Saifadin commented Jan 22, 2019

m-allanson commented Jan 22, 2019

Theming

Saifadin commented Jan 22, 2019

Theming

LekoArts commented Jan 23, 2019

fk commented Jan 23, 2019

Saifadin commented Jan 23, 2019

fk commented Jan 23, 2019 • edited

Saifadin commented Jan 23, 2019

sidharthachatterjee Jan 24, 2019

Choose a reason for hiding this comment

Saifadin Jan 24, 2019

Choose a reason for hiding this comment

Saifadin Jan 24, 2019

Choose a reason for hiding this comment

sidharthachatterjee commented Jan 24, 2019

Saifadin commented Jan 27, 2019

huv1k commented Jan 28, 2019

pieh commented Jan 28, 2019

Saifadin commented Jan 28, 2019

pieh left a comment

Choose a reason for hiding this comment

Saifadin commented Jan 29, 2019

gatsbot bot commented Jan 29, 2019

Saifadin commented Jan 21, 2019 •

edited

LekoArts commented Jan 21, 2019 •

edited

Saifadin commented Jan 21, 2019 •

edited

fk commented Jan 23, 2019 •

edited