2018-04-24 15:25:06 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
#voyager {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
This GraphQL Voyager example depends on Promise and fetch, which are available in
|
|
|
|
|
modern browsers, but can be "polyfilled" for older browsers.
|
|
|
|
|
GraphQL Voyager itself depends on React DOM.
|
|
|
|
|
If you do not want to rely on a CDN, you can host these files locally or
|
|
|
|
|
include them directly in your favored resource bunder.
|
|
|
|
|
-->
|
|
|
|
|
<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
|
|
|
|
|
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
|
|
|
|
|
<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
|
|
|
|
|
<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
|
|
|
|
|
|
2024-04-21 10:48:12 +02:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphql-voyager@1.3/dist/voyager.min.css" />
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/graphql-voyager@1.3/dist/voyager.standalone.js"></script>
|
2018-04-24 15:25:06 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="voyager">Loading...</div>
|
|
|
|
|
<script>
|
|
|
|
|
// Defines a GraphQL introspection fetcher using the fetch API. You're not required to
|
|
|
|
|
// use fetch, and could instead implement introspectionProvider however you like,
|
|
|
|
|
// as long as it returns a Promise
|
|
|
|
|
// Voyager passes introspectionQuery as an agrument for this function
|
|
|
|
|
function introspectionProvider(introspectionQuery) {
|
|
|
|
|
// This example expects a GraphQL server at the path /graphql.
|
|
|
|
|
// Change this to point wherever you host your GraphQL server.
|
|
|
|
|
return fetch('/', {
|
|
|
|
|
method: 'post',
|
|
|
|
|
headers: {
|
|
|
|
|
'Accept': 'application/json',
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({query: introspectionQuery}),
|
|
|
|
|
credentials: 'include',
|
|
|
|
|
}).then(function (response) {
|
|
|
|
|
return response.text();
|
|
|
|
|
}).then(function (responseBody) {
|
|
|
|
|
try {
|
|
|
|
|
return JSON.parse(responseBody);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
return responseBody;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// Render <Voyager /> into the body.
|
|
|
|
|
GraphQLVoyager.init(document.getElementById('voyager'), {
|
|
|
|
|
introspection: introspectionProvider
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
