Update GraphiQL (#1069)
* Update GraphiQL Source * pass through request headers from header box --------- Co-authored-by: Christian Legnitto <LegNeato@users.noreply.github.com>
This commit is contained in:
parent
421c8c9d58
commit
b375146466
1 changed files with 46 additions and 32 deletions
|
@ -20,12 +20,16 @@ pub fn graphiql_source(
|
||||||
|
|
||||||
let stylesheet_source = r#"
|
let stylesheet_source = r#"
|
||||||
<style>
|
<style>
|
||||||
html, body, #app {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow: hidden;
|
width: 100%;
|
||||||
width: 100%;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#graphiql {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
"#;
|
"#;
|
||||||
let fetcher_source = r#"
|
let fetcher_source = r#"
|
||||||
|
@ -50,23 +54,25 @@ pub fn graphiql_source(
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
function graphQLFetcher(params) {
|
function graphQLFetcher(graphQLParams, opts) {
|
||||||
return fetch(GRAPHQL_URL, {
|
const { headers = {} } = opts;
|
||||||
method: 'post',
|
|
||||||
headers: {
|
return fetch(
|
||||||
'Accept': 'application/json',
|
GRAPHQL_URL,
|
||||||
'Content-Type': 'application/json',
|
{
|
||||||
|
method: 'post',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...headers,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(graphQLParams),
|
||||||
|
credentials: 'omit',
|
||||||
},
|
},
|
||||||
credentials: 'include',
|
).then(function (response) {
|
||||||
body: JSON.stringify(params)
|
return response.json().catch(function () {
|
||||||
}).then(function (response) {
|
return response.text();
|
||||||
return response.text();
|
});
|
||||||
}).then(function (body) {
|
|
||||||
try {
|
|
||||||
return JSON.parse(body);
|
|
||||||
} catch (error) {
|
|
||||||
return body;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,9 +80,11 @@ pub fn graphiql_source(
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
React.createElement(GraphiQL, {
|
React.createElement(GraphiQL, {
|
||||||
fetcher,
|
fetcher,
|
||||||
|
defaultVariableEditorOpen: true,
|
||||||
}),
|
}),
|
||||||
document.querySelector('#app'));
|
document.getElementById('graphiql'),
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
"#;
|
"#;
|
||||||
|
|
||||||
|
@ -87,16 +95,22 @@ pub fn graphiql_source(
|
||||||
<head>
|
<head>
|
||||||
<title>GraphQL</title>
|
<title>GraphQL</title>
|
||||||
{stylesheet_source}
|
{stylesheet_source}
|
||||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/graphiql@0.17.5/graphiql.min.css">
|
<script
|
||||||
|
crossorigin
|
||||||
|
src="https://unpkg.com/react@17/umd/react.development.js"
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
crossorigin
|
||||||
|
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
|
||||||
|
></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="graphiql">Loading...</div>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
|
<script
|
||||||
<script src="//unpkg.com/subscriptions-transport-ws@0.8.3/browser/client.js"></script>
|
src="https://unpkg.com/graphiql/graphiql.min.js"
|
||||||
<script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>
|
type="application/javascript"
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
|
></script>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
|
|
||||||
<script src="//cdn.jsdelivr.net/npm/graphiql@0.17.5/graphiql.min.js"></script>
|
|
||||||
<script>var GRAPHQL_URL = '{graphql_url}';</script>
|
<script>var GRAPHQL_URL = '{graphql_url}';</script>
|
||||||
<script>var usingSubscriptions = {using_subscriptions};</script>
|
<script>var usingSubscriptions = {using_subscriptions};</script>
|
||||||
<script>var GRAPHQL_SUBSCRIPTIONS_URL = '{graphql_subscriptions_url}';</script>
|
<script>var GRAPHQL_SUBSCRIPTIONS_URL = '{graphql_subscriptions_url}';</script>
|
||||||
|
|
Loading…
Add table
Reference in a new issue