GraphQL Playground retired, switch to GraphiQL?

[bartenra]

GraphQL Playground has been retired, and will no longer receive updates: graphql/graphql-playground#1143

Down the line, I think it would make sense for Ariadne to switch to GraphiQL because of this.

[rafalp]

I've tagged this as decision needed because GraphiQL is still behind Playground.

[ccsv]

I think it is good to switch to GraphiQL although I will miss the color scheme on Playground. GraphiQL does autofill some of the queries making it easier to use.

[dacevedo12]

Let's keep an eye on graphql/graphiql#2328

Once released, if Ariadne adopts it would be handy to allow passing settings so the user can configure the theme and other params #469

[rafalp]

My plan for this is to have an option on GraphQL app named explorer. If this is set to None, we'll use whatever is default GraphQL explorer for Ariadne at time. We will default to GraphiQL2 but will support Playground if you want and accept the risks. This will also let us provide special "404" explorer which always return 404 NOT FOUND response to the clients.

[davlee1972]

Can we get the GraphiQL2 with the explorer plug in?

https://graphql.org/swapi-graphql? << without explorer

https://www.youtube.com/watch?v=8DmtCPX4tdo << with explorer panel (around 2:09 minutes into video)

[rafalp]

Looks nice, @davlee1972. Is that version of GraphiQL available on CDN? We don't want to maintain and serve custom API explorer builds for Ariadne.

[davlee1972]

Yes this is the latest version:
https://www.npmjs.com/package/graphiql

But the Explorer functionality is a plug-in.. The YouTube video above goes through the plug-in installation steps.

At some point GraphiQL will include the Explorer I believe and it is discussed in: graphql/graphiql#2328

[rafalp]

But the Explorer functionality is a plug-in.. The YouTube video above goes through the plug-in installation steps.

I understand, but Ariadne never served any static files for API explorers, only HTML that pulled assets from CDN.

[davlee1972]

There is a HTML file for this..
https://www.npmjs.com/package/graphiql

Examples
Unpkg (CDN) - A single HTML file using CDN assets and a script tag

Found more info on the explorer plug-in here:
https://github.com/graphql/graphiql/tree/4270007671ce52f6c2250739916083611748b657/packages/graphiql-plugin-explorer

CDN bundles
You can also use add this plugin when using the CDN bundle to render GraphiQL. Check out the example HTML file that shows how you can do this.

https://github.com/graphql/graphiql/blob/4270007671ce52f6c2250739916083611748b657/packages/graphiql-plugin-explorer/examples/index.html

[davlee1972]

The last index.html works.. I just plugged it into Ariadne

from ariadne.constants import PLAYGROUND_HTML

def get_graphiql_html():
    with open("Fund_API/graphQL/index.html") as f:
        return f.read()

GRAPHIQL_HTML = get_graphiql_html()

I did have to modify the index.html to swap in the URL of my graphql server and default query to show. These can probably be part of some initialization routine to modify the html.

var fetcher = GraphiQL.createFetcher({
        url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
      });

      function GraphiQLWithExplorer() {
        var [query, setQuery] = React.useState(
          'query AllFilms {\n  allFilms {\n    films {\n      title\n    }\n  }\n}',
        );

[rafalp]

After some experimentation (and having to implement custom template engine) I've got this:

So explorers are strategy objects, and each explorer is free to implement custom features specific to it.

And if you are unhappy, you can always implement your own behaviour without having to dive into Ariadne's code.

[davlee1972]

Here's the apollo client html, but it has a lot of extra apollo links in the html..

https://studio.apollographql.com/public/star-wars-swapi/explorer?variant=current

<div style="width: 100%; height: 100%;" id='embedded-sandbox'></div>
<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script> 
<script>
  new window.EmbeddedSandbox({
    target: '#embedded-sandbox',
    initialEndpoint: 'http://localhost:4000',
    includeCookies: false,
  });
</script>

[rafalp]

I'm not sure we can do that in Ariadne core, seeing how Apollo keeps client part of their product, and there's no mention anywhere about running IDE on your own location or licensing.

apollographql/apollo-studio-community#2

[davlee1972]

I'm not sure.. the github code says MIT..

https://www.apollographql.com/docs/studio/explorer/sandbox/
You can use Sandbox offline and without an Apollo account. You also embed Sandbox on your own website.

https://github.com/apollographql/embeddable-explorer/blob/main/LICENSE

[rafalp]

Perfect, this is what I was looking for!

[rafalp]

@davlee1972 support for multiple explorers has been merged to Ariadne. I've did a skim of Apollo's client and decided to open separate issue for that, but I'll prioritize other work for 0.17 release now. If you can contribute it with separate PR, I'll be happy to merge it.