How to use a schema instead of an introspection query in index.html? #355
Description
Hi Team, first let me say what a great tool. Sorry if this belongs in the Discussions, but I didn't see any conversations there, so I am not sure if Discussions are being used.
What I am trying to do is create static documentation for our GraphQL API as part of our build and deployment process. I am using the SpectaQL tool and so far it's working great. I would also love to add an option to visualize our schema with GraphQL Voyager.
So let's make this simple. As proof of concept, I modified the index.html example in the following manner:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.css" />
<script src="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js"></script>
</head>
<body>
<div id="voyager" />
<script>
const data = ...
GraphQLVoyager.renderVoyager(document.getElementById('voyager'), {
introspection: JSON.parse(data)
});
</script>
</body>
</html>
Where data
is the result of executing an introspection query against our schema.
Works great! But during our build process I can't execute an introspection query. The only thing I have access to is our schema file.
I read some older issues and I see this seems to be a common question. I enabled allowToChangeSchema
and played around with the tool, so I know it's possible to use an SDL string instead of the introspection query to render the schema. But I can't figure out how to do it (my knowledge of JS is limited).
I am trying to do something like this: const data = introspectionFromSchema(buildSchema(sdlText)) but it doesn't seem that buildSchema
and introspectionFromSchema
functions are available in voyager.standalone.js
.
Are they minified? I am lost. Assuming I have const schema = ...
how do I convert it to a JSON object representing the result of the introspection query?
Thanks a lot.