Dynamically generated documentation explorer for GraphQL schemas. It aims to provide a better overview of a schema than GraphiQL, but without querying features.
This is a fork of Pluriza graphql-docs and Magnus Hallin's awesome GraphQL-Docs.
Pluriza's fork incorporates a nice sidebar and search capabilities. In addition this fork incorporates some style changes.
Clone and Install dependencies:
git clone [email protected]:Platoniq/graphql-docs.git
npm install
Compile dist files:
npm run prepare
Just copy the compiled graphql-docs.js (or the minimized version) to your project and link it along with the React dependencies following this example:
<!DOCTYPE html>
<html>
<head>
<title>GraphQL API Documentation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
<script src="dist/graphql-docs.js"></script>
<script>
API_PATH = window.location.origin + '/graphql'
function fetcher(query) {
return fetch(API_PATH, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: query,
}),
}).then(function(r) {
return r.json();
})
}
const rootElem = document.getElementById('documentation');
ReactDOM.render(
React.createElement(
GraphQLDocs.GraphQLDocs,
{
fetcher: fetcher,
}),
rootElem
);
</script>
</head>
<body>
<div id="documentation"></div>
</body>
</html>