mirror of
https://github.com/Suwayomi/Suwayomi-Server.git
synced 2026-07-03 19:04:39 -05:00
Use Graphiql with the Explorer plugin for the query builder
This commit is contained in:
Syer10
@@ -25,18 +25,10 @@ object GraphQLController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
fun playground(ctx: Context) {
|
fun playground(ctx: Context) {
|
||||||
val playgroundHtml = javaClass.getResource("/graphql-playground.html")
|
val body = javaClass.getResourceAsStream("/graphql-playground.html")!!.bufferedReader().use { reader ->
|
||||||
|
|
||||||
val body = playgroundHtml.openStream().bufferedReader().use { reader ->
|
|
||||||
val graphQLEndpoint = "graphql"
|
|
||||||
val subscriptionsEndpoint = "graphql"
|
|
||||||
|
|
||||||
reader.readText()
|
reader.readText()
|
||||||
.replace("\${graphQLEndpoint}", graphQLEndpoint)
|
|
||||||
.replace("\${subscriptionsEndpoint}", subscriptionsEndpoint)
|
|
||||||
}
|
}
|
||||||
|
ctx.html(body)
|
||||||
ctx.html(body ?: "Could not load playground")
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fun webSocket(ws: WsConfig) {
|
fun webSocket(ws: WsConfig) {
|
||||||
|
|||||||
@@ -1,60 +1,84 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset=utf-8/>
|
<title>GraphiQL</title>
|
||||||
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
|
<style>
|
||||||
<title>GraphQL Playground</title>
|
body {
|
||||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
|
height: 100%;
|
||||||
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
|
margin: 0;
|
||||||
<script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphiql {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
This GraphiQL example depends on Promise and fetch, which are available in
|
||||||
|
modern browsers, but can be "polyfilled" for older browsers.
|
||||||
|
GraphiQL itself depends on React DOM.
|
||||||
|
If you do not want to rely on a CDN, you can host these files locally or
|
||||||
|
include them directly in your favored resource bundler.
|
||||||
|
-->
|
||||||
|
<script
|
||||||
|
crossorigin="anonymous"
|
||||||
|
integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
|
||||||
|
src="https://unpkg.com/react@17/umd/react.development.js"
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
crossorigin="anonymous"
|
||||||
|
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
|
||||||
|
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
These two files can be found in the npm module, however you may wish to
|
||||||
|
copy them directly into your environment, or perhaps include them in your
|
||||||
|
favored resource bundler.
|
||||||
|
-->
|
||||||
|
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet"/>
|
||||||
|
<link href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.min.css" rel="stylesheet"/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="root">
|
<div id="graphiql">Loading...</div>
|
||||||
<style>
|
<script
|
||||||
body {
|
src="https://unpkg.com/graphiql/graphiql.min.js"
|
||||||
background-color: rgb(23, 42, 58);
|
type="application/javascript"
|
||||||
font-family: Open Sans, sans-serif;
|
></script>
|
||||||
height: 90vh;
|
<script
|
||||||
|
src="https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js"
|
||||||
|
type="application/javascript"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const fetcher = GraphiQL.createFetcher({
|
||||||
|
url: window.location.href,
|
||||||
|
});
|
||||||
|
|
||||||
|
function GraphiQLWithExplorer() {
|
||||||
|
const [query, setQuery] = React.useState(
|
||||||
|
'query AllCategories {\n categories {\n manga {\n title\n }\n }\n}',
|
||||||
|
);
|
||||||
|
const explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
|
||||||
|
query: query,
|
||||||
|
onEdit: setQuery,
|
||||||
|
});
|
||||||
|
return React.createElement(GraphiQL, {
|
||||||
|
fetcher: fetcher,
|
||||||
|
defaultEditorToolsVisibility: true,
|
||||||
|
plugins: [explorerPlugin],
|
||||||
|
query: query,
|
||||||
|
onEditQuery: setQuery,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
#root {
|
ReactDOM.render(
|
||||||
height: 100%;
|
React.createElement(GraphiQLWithExplorer),
|
||||||
width: 100%;
|
document.getElementById('graphiql'),
|
||||||
display: flex;
|
);
|
||||||
align-items: center;
|
</script>
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 200;
|
|
||||||
color: rgba(255, 255, 255, .6);
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 78px;
|
|
||||||
height: 78px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
|
|
||||||
<div class="loading"> Loading
|
|
||||||
<span class="title">GraphQL Playground</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>window.addEventListener('load', function (event) {
|
|
||||||
GraphQLPlayground.init(document.getElementById('root'), {
|
|
||||||
settings: {'request.credentials': 'same-origin'},
|
|
||||||
endpoint: '/${graphQLEndpoint}',
|
|
||||||
subscriptionEndpoint: '/${subscriptionsEndpoint}'
|
|
||||||
})
|
|
||||||
})</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user