Comments (9)
For the people who end up here, in the meantime you can always overwrite the graphiql template that flask-graphql uses.
GraphQLView.as_view(
...
graphiql_version="1.0.5",
graphiql_template=graphiql_template.TEMPLATE,
)
Where graphiql_template.TEMPLATE
is an updated version of flask_graphql/render_graphiql.py:5
I simply used the flask-graphql template and updated react, was smooth sailing.
from flask-graphql.
For anyone looking for an updated graphiql template that supports request headers, this is a slightly tweaked version (template variables have been changed to match the variables passed in by flask-graphql
), taken mostly from graphql-server.
TEMPLATE = """<!--
The request to this GraphQL server provided the header "Accept: text/html"
and as a result has been presented GraphiQL - an in-browser IDE for
exploring GraphQL.
If you wish to receive JSON, provide the header "Accept: application/json" or
add "&raw" to the end of the URL within a browser.
-->
<!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;
}
</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]/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;
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));
}
// Render <GraphiQL /> into the body.
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: subscriptionsFetcher || graphQLFetcher,
onEditQuery: onEditQuery,
onEditVariables: onEditVariables,
onEditHeaders: onEditHeaders,
onEditOperationName: onEditOperationName,
query: {{ params.query|tojson }},
response: {{ result|tojson }},
variables: {{ params.variables|tojson }},
operationName: {{ params.operation_name|tojson }},
headers: {{params.headers or ''|tojson}},
headerEditorEnabled: true,
shouldPersistHeaders: true,
}),
document.getElementById('graphiql')
);
</script>
</body>
</html>"""
from flask-graphql.
@vallode glad it was easy to override, that's the purpose of those parameters on the GraphiQLView class.
Another example can be found at #68.
Cheers!
from flask-graphql.
Unfortunately I am relying on graphene-file-upload
, which directly depends on flask-graphql
.
Even if that wasn't the case, the graphql-server
pre-release depends on graphene 3.0, and I'm also using graphene-sqlalchemy
, which doesn't support that version yet.
from flask-graphql.
Hi @ShivanshJ
The plan is to merge flask-graphql into graphql-server-core and release it as v3 and also bring latest GraphiQL version which does support the headers
option. Please take a look at graphql-python/graphql-server#49
from flask-graphql.
Separately, maintaining our own template is less than ideal -- is there an update on when flask-graphql
will support this feature?
from flask-graphql.
Separately, maintaining our own template is less than ideal -- is there an update on when
flask-graphql
will support this feature?
Well yes, use graphql-server
pre-release version, which supports flask, sanic, aiohttp, webob by following the flask docs
from flask-graphql.
Since it seems like everything is being consolidated in graphql-server
, does that mean flask-graphql
won't be releasing newer versions?
from flask-graphql.
Any news on a way to have a header support for flask-graphql ?
from flask-graphql.
Related Issues (20)
- How to get GraphQL error objects using GraphQLView in 2.0.0? HOT 1
- No updates recently? HOT 1
- Why graphql does not return JSON?
- Incompatible with graphql-core==3.0.0 HOT 2
- Upgrade to graphql-core v3 HOT 3
- Enabling "explorer" HOT 14
- Bump graphql-core version to fix concurrency / security issues
- Flask-GraphQL now returns warnings when using `graphql-core HOT 3
- Include Altair GraphQL view HOT 2
- The embedded GraphiQL version is extremely outdated HOT 5
- Documentation on how to make an update mutation
- AttributeError on Graphqlview HOT 1
- CSRF Exemption? HOT 1
- which graphiql version is using? HOT 2
- Accessing query/mutation name from GraphQLView
- Graphene v3 breaks flask-graphql HOT 1
- Dependency conflicts with graphene>=3.0 HOT 2
- python 3.10+ MutableMapping ImportError HOT 1
- Error when importing flask_graphql HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flask-graphql.