Skip to content

Latest commit

 

History

History
55 lines (41 loc) · 1.47 KB

visualising.md

File metadata and controls

55 lines (41 loc) · 1.47 KB

Visualising

Various ways to visualise your GraphQL Schema with ease:

graphqlviz https://localhost:3000/graphql | dot -Tpng -o graph.png

Graphqlviz

Easily export your API schema into a png file: https://github.com/sheerun/graphqlviz

Voyager

Nicely explore the schema of your GraphQL App, using an amazing app: https://github.com/APIs-guru/graphql-voyager

Create a file private/voyager.html in your Meteor app:

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
  <script src="https://cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.min.js"></script>
</head>

<body>
  <div id="voyager">Loading...</div>
  <script>
    const GRAPHQL_ENDPOINT = 'http://localhost:3000/graphql';

    function introspectionProvider(query) {
      return fetch(GRAPHQL_ENDPOINT, {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: query }),
      }).then(response => response.json());
    }
    // Render <Voyager />
    GraphQLVoyager.init(document.getElementById('voyager'), {
      introspection: introspectionProvider
    })
  </script>
</body>

</html>

Table of Contents