fullstack-starter/voyager.html at master · NovvumHacks/fullstack-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>

		<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.min.js"></script>
	</head>
	<body>
		<div id="voyager">Loading...</div>
		<script>
			function introspectionProvider(introspectionQuery) {
				return window
					.fetch('https://localhost:4000', {
						body: JSON.stringify(`query {${introspectionQuery}}`),
					})
					.then(res => res)
					.catch(err => console.error(err));
			}

			// Render <Voyager />
			GraphQLVoyager.init(document.getElementById('voyager'), {
				introspection: introspectionProvider,
			});
		</script>
	</body>
</html>