graphiql plugin-explorer
#1674
Replies: 1 comment
-
|
answering my own question, here's what I did created an HTML file with <html>
<head>
<title>GraphiQL</title>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
/>
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script
crossorigin
src="https://unpkg.com/react/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/graphiql/graphiql.min.js"
></script>
<script
src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
crossorigin
></script>
<script>
const graphQLFetcher = (graphQLParams, opts) =>
fetch('/graphql', {
method: 'post',
headers: { 'Content-Type': 'application/json', ...opts.headers },
body: JSON.stringify(graphQLParams),
})
.then(response => response.json())
.catch(() => response.text());
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
defaultEditorToolsVisibility: true,
plugins: [explorerPlugin]
}),
document.getElementById('graphiql'),
);
</script>
</body>
</html>registered the view using @Configuration(proxyBeanMethods = false)
public class WebConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/graphiql").setViewName("graphiql.html");
}
}disabled the built-in graphiql dgs:
graphql:
graphiql:
enabled: false |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
how can I use @graphiql/plugin-explorer?
Beta Was this translation helpful? Give feedback.
All reactions