flask-graphql
flask-graphql copied to clipboard
graphql-python
Enabling "explorer"
Is there a way to enable the GraphiQL explorer for a Python (flask-graphql) backend?
Do something like as:
view_func = GraphQLView.as_view("graphql", schema=Schema(query=some_api_schema.Query), graphiql=True)
app.add_url_rule("/graphql", view_func=view_func)
Notice the graphiql=True argument being passed,
@KingDarBoja , I think they mean like this: https://stackoverflow.com/questions/59791068/how-do-i-add-the-explorer-to-graphiql-using-flask-graphql
Using graphiql-explorer.
Do you have an example template that would work? Ive been trying to follow the stack overflow ticket, but Im not a react expert.
Ah, that thing is easy to implement, guess I could add that extension to the graphiql template on https://github.com/graphql-python/graphql-server as all server integration code lives there since v3.
@KingDarBoja , any ideas for a quick fix, ie a template string? I tried myself like the ticket mentioned but had no luck.
@datavistics Best idea should be providing a working example, which make use of the graphiql_template option as described at https://github.com/graphql-python/graphql-server/blob/master/docs/flask.md . I could write it but would be at the weekend as I'm currently busy these days.
Thanks for responding, and if you wrote it over the weekend that would be hugely helpful.
I tried for longer than I care to admit, but Im just at a loss between the js + react -> html -> jinja. I didnt see how to pass the schema, or some of the other parameters required.
@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 https://github.com/OneGraph/graphiql-explorer/issues/29#issue-517377769 .
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/[email protected]/dist/polyfill.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/unfetch.umd.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/graphiqlExplorer.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/browser/client.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/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.
Speaking of that, I found https://github.com/strawberry-graphql/strawberry/pull/293 which seems to point out some issues regarding graphql-explorer 🤔 I will take a closer look at it later.
@KingDarBoja thanks a ton, but unfortunately I couldnt get it to work. Im using graphene-elastic which depends on graphene < 3.
@KingDarBoja Is there a way to use this for graphene 2.1.8 and Flask-GraphQL 2.0.1 ?
@KingDarBoja Is there a way to use this for
graphene 2.1.8andFlask-GraphQL 2.0.1?
Flask-GraphQL 2 supports passing custom graphiql templates as well.
@KingDarBoja Is your working graphiql version with explorer published on github? I can't get it to work and a working example from where to start would be a lifesaver
@KingDarBoja Thanks for this!
Would love to see it get fully developed. I.e. clicking on the nodes fills the query; node selections get updated when query is updated; node fields can be selected.
