Start GraphQL API

GregBrimble · GregBrimble · commit 7a169ef9523f · 2021-01-21T14:17:25.000Z
diff --git a/api/graphql/index.ts b/api/graphql/index.ts
@@ -1,9 +1,15 @@
 import { FABRuntime } from "@fab/core";
 import { makeGraphQLHandler } from "@glenstack/cf-workers-graphql";
 import { schema } from "./schema/index";
+import { voyager } from "./voyager";
 
 const graphQLHandler = makeGraphQLHandler(schema);
 
 export default function graphql({ Router }: FABRuntime) {
   Router.on("/graphql", ({ request }) => graphQLHandler(request));
+  Router.on(
+    "/voyager",
+    async () =>
+      new Response(voyager, { headers: { "Content-Type": "text/html" } })
+  );
 }
diff --git a/api/graphql/schema/index.ts b/api/graphql/schema/index.ts
@@ -1,5 +1,9 @@
 import { makeExecutableSchema } from "@graphql-tools/schema";
 import gql from "graphql-tag";
+import { typeDefs as scalarTypeDefs } from "./types/scalars";
+import { typeDefs as relayTypeDefs } from "./types/relay";
+import { typeDefs as documentTypeDefs } from "./types/document";
+import { typeDefs as searchResultTypeDefs } from "./types/searchResult";
 
 const typeDefs = gql`
   type Query {
@@ -13,4 +17,13 @@ const resolvers = {
   },
 };
 
-export const schema = makeExecutableSchema({ typeDefs, resolvers });
+export const schema = makeExecutableSchema({
+  typeDefs: [
+    typeDefs,
+    ...scalarTypeDefs,
+    ...relayTypeDefs,
+    documentTypeDefs,
+    searchResultTypeDefs,
+  ],
+  resolvers: [resolvers],
+});
diff --git a/api/graphql/schema/types/document.ts b/api/graphql/schema/types/document.ts
@@ -0,0 +1,15 @@
+import { connectionDefinitions } from "graphql-relay-tools";
+import gql from "graphql-tag";
+
+const { connectionType: DocumentConnection } = connectionDefinitions({
+  name: "Document",
+});
+
+export const typeDefs = gql`
+  type Document implements Node {
+    id: ID!
+    url: URL!
+  }
+
+  ${DocumentConnection}
+`;
diff --git a/api/graphql/schema/types/relay/index.ts b/api/graphql/schema/types/relay/index.ts
@@ -0,0 +1,4 @@
+import { typeDefs as nodeTypeDefs } from "./node";
+import { typeDefs as pageInfoTypeDefs } from "./pageInfo";
+
+export const typeDefs = [nodeTypeDefs, pageInfoTypeDefs];
diff --git a/api/graphql/schema/types/relay/node.ts b/api/graphql/schema/types/relay/node.ts
@@ -0,0 +1,10 @@
+import gql from "graphql-tag";
+import { nodeInterface, nodeField } from "graphql-relay-tools";
+
+export const typeDefs = gql`
+  ${nodeInterface}
+
+  extend type Query {
+    ${nodeField}
+  }
+`;
diff --git a/api/graphql/schema/types/relay/pageInfo.ts b/api/graphql/schema/types/relay/pageInfo.ts
@@ -0,0 +1,6 @@
+import gql from "graphql-tag";
+import { pageInfoType } from "graphql-relay-tools";
+
+export const typeDefs = gql`
+  ${pageInfoType}
+`;
diff --git a/api/graphql/schema/types/scalars/index.ts b/api/graphql/schema/types/scalars/index.ts
@@ -0,0 +1,3 @@
+import { typeDefs as urlTypeDefs } from "./url";
+
+export const typeDefs = [urlTypeDefs];
diff --git a/api/graphql/schema/types/scalars/url.ts b/api/graphql/schema/types/scalars/url.ts
@@ -0,0 +1,5 @@
+import gql from "graphql-tag";
+
+export const typeDefs = gql`
+  scalar URL
+`;
diff --git a/api/graphql/schema/types/searchResult.ts b/api/graphql/schema/types/searchResult.ts
@@ -0,0 +1,12 @@
+import { connectionArgs } from "graphql-relay-tools";
+import gql from "graphql-tag";
+
+export const typeDefs = gql`
+  type SearchResult {
+    documents${connectionArgs()}: DocumentConnection!
+  }
+
+  extend type Query {
+    search(query: String!): SearchResult!
+  }
+`;
diff --git a/api/graphql/voyager.ts b/api/graphql/voyager.ts
@@ -0,0 +1,29 @@
+export const voyager = `<!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 fetch('/graphql', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: introspectionQuery }),
+              credentials: 'include'
+          }).then(function (response) {
+              return response.json()
+          })
+      }
+
+      GraphQLVoyager.init(document.getElementById('voyager'), {
+        introspection: introspectionProvider
+      })
+    </script>
+  </body>
+</html>`;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { typeDefs as urlTypeDefs } from "./url";`
	`2`	`+`
	`3`	`+export const typeDefs = [urlTypeDefs];`