How to use a schema instead of an introspection query in index.html?

Question

How to use a schema instead of an introspection query in index.html?

zleonov opened this issue a year ago · comments

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.