Gatsby: Use Playground instead of GraphiQl

[Saifadin]

Summary

Gatsby should use Prisma GraphQl Playground instead of GraphiQl for its Query Browser.

Motivation

After using the Prisma Playground for the last months, I can not go back to GraphiQl. To just list the pros/cons and after being motivated by @KyleAMathews on twitter to create an issue. I will try to be objective and focus on the benefits for Gatsby

Pros

• 🗂Tabs to save prior queries
• 📖Query Browser easier to navigate back and forth
• ⚙️Customisation Options (for the editor)
• ⚛️Maintained by one of the biggest GraphQl providers for React and recommended by Apollo
• 🔏Tracing
• 🌑Dark Mode

Cons

• New URL needs to be implemented, maybe only with a major version upgrade or both in parallel (/___playground)
• People got used to GraphiQl

If you have any own Pros or Cons, please add them here. Maybe they will help the Gatsby make a more educated decision. If good ones are mentioned, I might edit the above list.

EDIT: I went ahead and created this plugin that will add a route at /___playground with the Prisma Playground. 😄

[polarathene]

I haven't tried the playground, is it that much different to get used to from GraphiQL as your cons suggest? Does it not support something you can do with GraphiQL, or work/behave in a very different way to do similar tasks?

[glauberfc]

I think that's a good change

[Saifadin]

@polarathene not really, but I added that point because people like to complain about change 😅

[huv1k]

Hey :), it would be nice to have graphql-playground bundled with Gatsby. But first of all playground is made by Prisma. And if you want some new feature inside playground please create an issue. Playground supports theming and there could be even Gatsby theme, so it would fit more to whole Gatsby family.

[Saifadin]

@Huvik you are totally right, we are using it with Apollo and mixed them up haha
I will fix that.

[sidharthachatterjee]

@Saifadin I could see this being a plugin!

Should be easy to set up a new route in express onCreateDevServer

[Saifadin]

@sidharthachatterjee that is also a possible approach, that can be used in the meanwhile, as I think this would be at least minor version jump or even a major one.
To be frank I think for beginners to GraphQl the Playground might be easier to use. This is a very subjective viewpoint I know, but I stand by it 😝

[wardpeet]

if you want to use playground now you can checkout #4231 to start using it.

Sadly we have other priorities right now and don't see this as a blocking issue.

[Saifadin]

I would love for the gatsby team to consider using Playground and to discuss it. But for now I created this plugin that creates the /___playground route which can be used to query and navigate through the schema

https://github.com/Saifadin/gatsby-plugin-playground

It worked with multiple of my projects and I hope no issues arise :)

[sidharthachatterjee]

@Saifadin Would you like to add support for Playground in core? @freiksenet mentioned that Playground is better maintained than GraphiQL and we would love to accept a PR!

[Saifadin]

@sidharthachatterjee sure I can get to that 👌🏽
Will make a PR soon-ish^^

[Saifadin]

@sidharthachatterjee follow-up question, should I stick with express-graphql and add a new route for the Playground or replace it with apollo-server-express?

[sidharthachatterjee]

I think we should stick with express-GraphQL and add a new route for the moment

[huv1k]

@Saifadin I would suggest you to use graphql-playground-middleware-express, because this one receives most recent updates. And its kind of easy to implement it.

[Saifadin]

Yes, exactly. That's what I am using in gatsby-plugin-playground and I already added it.
Spoiler: It works, just need to fix some little stuff

[huv1k]

Nice! I would really love to see some custom Gatsby purple theme for the playground. It would be a really nice addition.

[Saifadin]

Yes I agree!! Will try to add that 😁

[huv1k]

If you need help hit me up!

[Saifadin]

A PR adding it as an experimental feature has been merged. To use it update your version and add the environment variable GATSBY_GRAPHQL_IDE=playground to use it.

Have fun 👋🏽

[imolorhe]

There is also a gatsby plugin for Altair, in case anyone wants to spice things up a little bit more! 😄
https://www.gatsbyjs.org/packages/gatsby-plugin-altair-graphql/

[ATakaSKY]

Yes, exactly. That's what I am using in gatsby-plugin-playground and I already added it.
Spoiler: It works, just need to fix some little stuff

Works like a charm dude!