example/graphiql.html

<!DOCTYPE html>
<!--
# Copyright (C) DATADVANCE, 2010-2021
#
# Permission is hereby granted, free of charge, to any person obtaining
# a copy of this software and associated documentation files (the
# "Software"), to deal in the Software without restriction, including
# without limitation the rights to use, copy, modify, merge, publish,
# distribute, sublicense, and/or sell copies of the Software, and to
# permit persons to whom the Software is furnished to do so, subject to
# the following conditions:
#
# The above copyright notice and this permission notice shall be
# included in all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
# IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
# CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
# TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
# SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<html>
    <head>
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                overflow: hidden;
                width: 100%;
            }
        </style>
        <link
            href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css"
            rel="stylesheet"
        />
        <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
        <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js"></script>
    </head>

    <body>
        <script>
            // Setup subscription client.
            const GRAPHQL_ENDPOINT =
                (location.protocol === "https" ? "wss" : "ws") +
                "://" +
                location.host +
                "/graphql/"
            let subClient = new window.SubscriptionsTransportWs.SubscriptionClient(
                GRAPHQL_ENDPOINT,
                {reconnect: true},
            )
            subFetcher = subClient.request.bind(subClient)

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