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
-
how can I use @graphiql/plugin-explorer?
Beta Was this translation helpful? Give feedback.
All reactions