Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can we run this from a CDN?

See original GitHub issue

So pretty much I’d like to replace using graphiql in my package with using graphql-playground.

The package in question doesn’t use node, or a build process.

With Graphiql it’s as simple as the below snippet, is there a graphql-playground equivalent?

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
                width: 100%;
                overflow: hidden;
            }
            #graphiql {
                height: 100vh;
            }
        </style>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.3/graphiql.min.js"></script>
    </head>
    <body>
        <div id="graphiql">Loading...</div>
        <script>

            // Defines a GraphQL fetcher using the fetch API.
            function graphQLFetcher(graphQLParams) {

            	const headers = {
		            'Accept': 'application/json',
		            'Content-Type': 'application/json',
	            };

                return fetch('__ENDPOINT__', {
                    method: 'post',
                    headers,
                    body: JSON.stringify(graphQLParams),
                    credentials: 'include',
                }).then(function (response) {
                    return response.text();
                }).then(function (responseBody) {
                    try {
                        return JSON.parse(responseBody);
                    } catch (error) {
                        return responseBody;
                    }
                });
            }

            // Render <GraphiQL /> into the body.
            ReactDOM.render(
                React.createElement(GraphiQL, {
                    fetcher: graphQLFetcher,
                }),
                document.getElementById('graphiql')
            );
        </script>
    </body>
</html>

Issue Analytics

State:
Created 6 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

symmcommented, Mar 23, 2018

@hailwood I’ve seen there is a CDN at https://cdn.jsdelivr.net/npm/graphql-playground@1.3.17/build/ but it’s quite an old version but would really like to use v1.4.5 or newer.

@timsuchanek @schickling Could you push the latest version of this package to npmjs? it looks like it hasn’t been updated in a while: https://www.npmjs.com/package/graphql-playground?activeTab=versions

0reactions

timsuchanekcommented, Jun 29, 2018

Thanks for asking @hailwood! We renamed the graphql-playground repo to graphql-playground-react, that’s the reason there was no activity. The npm package of graphql-playground-react is up-to-date.

There are 2 options to serve this from a CDN: Either with a fixed version or with the latest version.

This is a snippet for the latest version: https://github.com/prismagraphql/graphql-playground/blob/master/packages/graphql-playground-html/withAnimation.html

Actually all middlewares use the CDN mechanism under the hood. If you want the playground version to be typed, you can either use the graphql-playground-html package to render it or add the @version to the CDN link, like the source code here: https://demo-graphql-yoga.glitch.me