@datavistics I hate doing stuff with React but was able to make it work with a custom template by looking at other repositories which tried to implement it (on JS ofc) like OneGraph/graphiql-explorer#29 (comment) .

My current result

What do you need (and I have done so far) on the graphiql_template:

GraphiQL Template on some py file

GRAPHIQL_VERSION = "1.0.3"
GRAPHIQL_TEMPLATE = """
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>{{graphiql_html_title}}</title>
    <meta name="robots" content="noindex" />
    <meta name="referrer" content="origin" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        #graphiql {
            height: 100vh;
        }
        
        .graphiql-container {
            height: 100%;
            display: flex;
        }
        
        .graphiql-wrapper {
            width: calc(100% - 320px);
        }
    </style>
    <link href="//cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.css" rel="stylesheet" />
    <script src="//cdn.jsdelivr.net/npm/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/unfetch@4.1.0/dist/unfetch.umd.js"></script>
    <script src="//cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/graphiql-explorer@0.6.2/graphiqlExplorer.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/subscriptions-transport-ws@0.9.16/browser/client.js"></script>
    <script src="//cdn.jsdelivr.net/npm/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>
</head>

<body>
    <div id="graphiql">Loading...</div>
    <script>
        // Collect the URL parameters
        var parameters = {};
        window.location.search.substr(1).split('&').forEach(function (entry) {
            var eq = entry.indexOf('=');
            if (eq >= 0) {
                parameters[decodeURIComponent(entry.slice(0, eq))] =
                    decodeURIComponent(entry.slice(eq + 1));
            }
        });
        // Produce a Location query string from a parameter object.
        function locationQuery(params) {
            return '?' + Object.keys(params).filter(function (key) {
                return Boolean(params[key]);
            }).map(function (key) {
                return encodeURIComponent(key) + '=' +
                    encodeURIComponent(params[key]);
            }).join('&');
        }
        // Derive a fetch URL from the current URL, sans the GraphQL parameters.
        var graphqlParamNames = {
            query: true,
            variables: true,
            operationName: true
        };
        var otherParams = {};
        for (var k in parameters) {
            if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
                otherParams[k] = parameters[k];
            }
        }
        // Configure the subscription client
        let subscriptionsFetcher = null;
        if ('{{subscription_url}}') {
            let subscriptionsClient = new SubscriptionsTransportWs.SubscriptionClient(
                '{{ subscription_url }}',
                { reconnect: true }
            );
            subscriptionsFetcher = GraphiQLSubscriptionsFetcher.graphQLFetcher(
                subscriptionsClient,
                graphQLFetcher
            );
        }
        var fetchURL = locationQuery(otherParams);
        // Defines a GraphQL fetcher using the fetch API.
        function graphQLFetcher(graphQLParams, opts) {
            return fetch(fetchURL, {
                method: 'post',
                headers: Object.assign(
                    {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    opts && opts.headers,
                ),
                body: JSON.stringify(graphQLParams),
                credentials: 'include',
            }).then(function (response) {
                return response.json();
            });
        }
        // When the query and variables string is edited, update the URL bar so
        // that it can be easily shared.
        function onEditQuery(newQuery) {
            parameters.query = newQuery;
            updateURL();
        }
        function onEditVariables(newVariables) {
            parameters.variables = newVariables;
            updateURL();
        }
        function onEditHeaders(newHeaders) {
            parameters.headers = newHeaders;
            updateURL();
        }
        function onEditOperationName(newOperationName) {
            parameters.operationName = newOperationName;
            updateURL();
        }
        function updateURL() {
            history.replaceState(null, null, locationQuery(parameters));
        }
        
        // function handleToggleExplorer() {}
        // Render <GraphiQL /> into the body.
        function AppComponent() {
            var state = React.useState(undefined);
            var schema = state[0];
            var setSchema = state[1];
            var explorerIsOpen = true;
            window.setSchema = setSchema;
            
            function handleToggleExplorer() {
                this.explorerIsOpen = !this.explorerIsOpen;
            }
            
            const graphiql_explorer = React.createElement(GraphiQLExplorer.Explorer, {
                schema: schema,
                query: {{query|tojson}},
                onEdit: onEditQuery,
                // onRunOperation: {operationName =>
                //     this._graphiql.handleRunQuery(operationName)
                // }
                explorerIsOpen: explorerIsOpen,
                onToggleExplorer: handleToggleExplorer
                // getDefaultScalarArgValue: getDefaultScalarArgValue
                // makeDefaultArg: makeDefaultArg
            });
            const graphiql = React.createElement(GraphiQL, {
                fetcher: subscriptionsFetcher || graphQLFetcher,
                onEditQuery: onEditQuery,
                onEditVariables: onEditVariables,
                onEditHeaders: onEditHeaders,
                onEditOperationName: onEditOperationName,
                query: {{query|tojson}},
                response: {{result|tojson}},
                variables: {{variables|tojson}},
                headers: {{headers|tojson}},
                operationName: {{operation_name|tojson}},
                defaultQuery: {{default_query|tojson}},
                headerEditorEnabled: {{header_editor_enabled|tojson}},
                shouldPersistHeaders: {{should_persist_headers|tojson}},
                ref: function(ref) {
                    window._graphiql = ref;
                }
            });
            const graphiql_component = React.createElement(
                "div",
                { className: "graphiql-wrapper" },
                graphiql
            );
            
            return React.createElement(
                "div",
                { className: "graphiql-container" },
                graphiql_explorer,
                graphiql_component
            )
        }

        ReactDOM.render(
            React.createElement(AppComponent),
            document.getElementById('graphiql')
        );
        
        function trySetSchemaFromGraphiqlToGraphiqlExplorer() {
            setTimeout(function() {
                if (
                    window._graphiql &&
                    window._graphiql.state &&
                    window._graphiql.state.schema
                ) {
                    window.setSchema(window._graphiql.state.schema);
                } else {
                    trySetSchemaFromGraphiqlToGraphiqlExplorer();
                }
            }, 500);
        }
        trySetSchemaFromGraphiqlToGraphiqlExplorer();
    </script>
</body>

</html>
"""

Then just pass to GraphQLView class at graphiql_template field like below.

from flask import Flask
from graphql_server.flask import GraphQLView

from graphiql_explorer import GRAPHIQL_TEMPLATE, GRAPHIQL_VERSION
from schema import schema

app = Flask(__name__)

app.add_url_rule('/graphql', view_func=GraphQLView.as_view(
    'graphql',
    schema=schema,
    graphiql=True,
    graphiql_template=GRAPHIQL_TEMPLATE,
    graphiql_version=GRAPHIQL_VERSION,
))

if __name__ == '__main__':
    app.run()

NOTE: I am using graphql-server beta version so please follow these setup to know how to install flask integration with this or use flask-graphql beta v3.

Also, some stuff doesn't work at all like clicking on the explorer nodes as I haven't added the rest of options listed at https://github.com/OneGraph/graphiql-explorer-example/blob/master/src/App.js#L171 example but this initial setup should be the way to go.

Enabling "explorer" #68

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions