graphiql explorer plugin

pull/1/head
paidge 4 months ago
parent d6970254f5
commit 66c0e437c0

@ -6,14 +6,23 @@ if (!defined('_ECRIRE_INC_VERSION')) {
function graphql_header_prive($flux) {
$flux .= recuperer_fond('prive/js/graphql');
$flux .= '
<script
src="https://unpkg.com/react@17/umd/react.development.js"
integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
crossorigin="anonymous"
></script>';
$flux .= '<script
src="https://unpkg.com/react@17/umd/react.development.js"
integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
crossorigin="anonymous"></script>';
$flux .= '<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
crossorigin="anonymous"></script>';
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
crossorigin="anonymous"
></script>';
$flux .= '<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />';
$flux .= '<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />';
return $flux;
}

@ -2,16 +2,41 @@
[(#VAL{graphql}|barre_onglets{graphql_ide})]
<div id="graphiql">Loading...</div>
<script
src="https://unpkg.com/graphiql/graphiql.min.js"
type="application/javascript"></script>
src="https://unpkg.com/graphiql/graphiql.min.js"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/@graphiql/plugin-explorer@0.1.12/dist/graphiql-plugin-explorer.umd.js"
crossorigin="anonymous"
></script>
<script>
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: GraphiQL.createFetcher({
url: "/spip.php?action=graphql",
}),
defaultEditorToolsVisibility: true,
}),
document.getElementById("graphiql")
)
</script>
var fetcher = GraphiQL.createFetcher({
url: "/spip.php?action=graphql",
});
function GraphiQLWithExplorer() {
var [query, setQuery] = React.useState(
'query articles {\n articles {\n pagination {\n current\n total\n }\n result {\n id\n titre\n }\n }\n}',
);
var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
query: query,
onEdit: setQuery,
});
return React.createElement(GraphiQL, {
fetcher: fetcher,
defaultEditorToolsVisibility: true,
plugins: [explorerPlugin],
query: query,
onEditQuery: setQuery,
});
}
ReactDOM.render(
React.createElement(GraphiQLWithExplorer),
document.getElementById('graphiql'),
);
console.log($('.graphiql-explorer-root'))
$('.graphiql-explorer-root > div').css('overflow','auto')
</script>
Loading…
Cancel
Save