add GraphQL Voyager

PierreJeanjacquot · PierreJeanjacquot · commit 4c62b466b0d1 · 2022-05-18T10:04:31.000+02:00
diff --git a/GraphQL Voyager/README.MD b/GraphQL Voyager/README.MD
@@ -0,0 +1,5 @@
+# GraphQL Voyager
+
+[GraphQL Voyager](https://github.com/APIs-guru/graphql-voyager) Represent any GraphQL API as an interactive graph. It's time to finally see the graph behind GraphQL.
+
+This GraphQL Voyager is based on bellecour subgraph introspection.
diff --git a/GraphQL Voyager/index.html b/GraphQL Voyager/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>iExec PoCo Subgraph Voyager</title>
+    <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 fetch(
+          "https://thegraph.bellecour.iex.ec/subgraphs/name/bellecour/poco-v5",
+          {
+            method: "post",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ query: introspectionQuery }),
+          }
+        ).then((response) => response.json());
+      }
+      GraphQLVoyager.init(document.getElementById("voyager"), {
+        introspection: introspectionProvider,
+      });
+    </script>
+  </body>
+</html>
