Update GraphiQL ()

* 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:
Gero Gerke 2023-08-28 23:18:23 +02:00 committed by GitHub
parent 421c8c9d58
commit b375146466
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>