75 lines
2.7 KiB
Text
75 lines
2.7 KiB
Text
!!! 5
|
|
%html{ lang: html_lang, class: yield(:root_class) }
|
|
%head
|
|
%meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
|
|
%meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
|
|
%meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
|
|
= csrf_meta_tags
|
|
|
|
%title
|
|
= content_for?(:title) ? "#{yield(:title)} · #{APPLICATION_NAME}" : APPLICATION_NAME
|
|
|
|
= favicon_link_tag(image_url("#{FAVICON_16PX_SRC}"), type: "image/png", sizes: "16x16")
|
|
= favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
|
|
= favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")
|
|
|
|
%link{ rel: "stylesheet", href: "https://unpkg.com/graphiql/graphiql.min.css" }
|
|
%link{ rel: "stylesheet", href: "https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" }
|
|
%script{ crossorigin: true, src: "https://unpkg.com/react@17/umd/react.development.js" }
|
|
%script{ crossorigin: true, src: "https://unpkg.com/react-dom@17/umd/react-dom.development.js" }
|
|
%script{ crossorigin: true, src: "https://unpkg.com/graphiql/graphiql.min.js" }
|
|
%script{ crossorigin: true, src: "https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js" }
|
|
|
|
= Gon::Base.render_data(camel_case: true, init: true, nonce: request.content_security_policy_nonce)
|
|
|
|
:css
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#graphiql {
|
|
height: 100vh;
|
|
}
|
|
|
|
%body
|
|
#graphiql
|
|
Loading...
|
|
|
|
:javascript
|
|
function csrfToken() {
|
|
var meta = document.querySelector('meta[name=csrf-token]');
|
|
return meta && meta.content;
|
|
}
|
|
var defaultQuery = window.gon.defaultQuery;
|
|
var defaultVariables = window.gon.defaultVariables;
|
|
|
|
var fetcher = GraphiQL.createFetcher({
|
|
url: '/api/v2/graphql',
|
|
headers: { 'x-csrf-token': csrfToken() }
|
|
});
|
|
|
|
function GraphiQLWithExplorer() {
|
|
var [query, setQuery] = React.useState(defaultQuery);
|
|
var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
|
|
query: query,
|
|
onEdit: setQuery,
|
|
});
|
|
return React.createElement(GraphiQL, {
|
|
fetcher: fetcher,
|
|
defaultEditorToolsVisibility: true,
|
|
plugins: [explorerPlugin],
|
|
query: query,
|
|
variables: defaultVariables,
|
|
onEditQuery: setQuery,
|
|
defaultEditorToolsVisibility: true,
|
|
isHeadersEditorEnabled: false
|
|
});
|
|
}
|
|
|
|
ReactDOM.render(
|
|
React.createElement(GraphiQLWithExplorer),
|
|
document.getElementById('graphiql'),
|
|
);
|