update deps & support 'graphiql' endpoint

o-az · o-az · commit d29579666704 · 2023-11-19T13:45:45.000-08:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,4 +1,4 @@
-name: CI
+name: Deploy
 
 on:
   workflow_dispatch:
@@ -21,11 +21,11 @@ env:
 jobs:
   deploy:
     name: "Deploy"
-    timeout-minutes: 3.69
+    timeout-minutes: 2
     runs-on: ["ubuntu-latest"]
     steps:
       - name: "Checkout"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4.1.1
 
       - name: "Setup Bun"
         uses: oven-sh/setup-bun@v1
diff --git a/README.md b/README.md
@@ -46,7 +46,9 @@ or get the `SDL`
 
 [`https://introspect.lagon.dev/sdl/https://spacex-production.up.railway.app`](https://introspect.lagon.dev/sdl/https://spacex-production.up.railway.app)
 
-or play around with it in a live playground [https://introspect.lagon.dev/playground/https://spacex-production.up.railway.app](https://introspect.lagon.dev/playground/https://spacex-production.up.railway.app)
+or play around with it in a live playground
+
+[`https://introspect.lagon.dev/playground/https://spacex-production.up.railway.app`](https://introspect.lagon.dev/playground/https://spacex-production.up.railway.app)
 
 By default API will return schema as `JSON`
 
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -12,11 +12,11 @@
     "deploy": "lagon deploy --production"
   },
   "dependencies": {
-    "graphql": "^16.7.1"
+    "graphql": "^16.8.1"
   },
   "devDependencies": {
-    "bun-types": "^0.7.1",
-    "typescript": "^5.1.6"
+    "bun-types": "^1.0.13",
+    "typescript": "^5.2.2"
   },
   "license": "GPL-3.0-or-later",
   "keywords": [
diff --git a/src/graphql/graphiql.html.ts b/src/graphql/graphiql.html.ts
@@ -19,48 +19,35 @@ export function htmlPage({ endpoint }: { endpoint: string }) {
         width: 100%;
         overflow: hidden;
       }
-
       #graphiql {
         height: 100vh;
       }
     </style>
-    <script
-      crossorigin
-      src="https://unpkg.com/react/umd/react.development.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/react-dom/umd/react-dom.development.js"
-    ></script>
-    <script
-      src="https://unpkg.com/graphiql/graphiql.min.js"
-      type="application/javascript"
-    ></script>
+    <script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
     <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
     <script
       src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
       crossorigin
     ></script>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
-    />
+    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
   </head>
   <body>
     <div id="graphiql">Loading...</div>
     <script>
-      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'))
       const fetcher = GraphiQL.createFetcher({
-        url: "${endpoint}",
-      });
-      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+        url: '${endpoint}',
+      })
+      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin()
       root.render(
         React.createElement(GraphiQL, {
           fetcher,
           defaultEditorToolsVisibility: true,
           plugins: [explorerPlugin],
-        }),
-      );
+        })
+      )
     </script>
   </body>
 </html>
diff --git a/src/graphql/schema.ts b/src/graphql/schema.ts
@@ -1,27 +1,37 @@
-import type { Json } from '#/types'
-import { buildClientSchema, printSchema, getIntrospectionQuery } from 'graphql'
-import type { IntrospectionOptions } from 'graphql'
+import {
+  printSchema,
+  buildClientSchema,
+  getIntrospectionQuery,
+  type IntrospectionOptions,
+} from 'graphql'
+import type { Json } from '#/types.ts'
 
 export function jsonSchemaToSDL(jsonString: string) {
   const json = JSON.parse(jsonString)
   const schema = buildClientSchema(json.data)
   return printSchema(schema)
 }
 
-export async function fetchJsonSchema({ url, minimal = true }: { url: string; minimal?: boolean }): Promise<Json> {
+export async function fetchJsonSchema({
+  url,
+  minimal = true,
+}: {
+  url: string
+  minimal?: boolean
+}): Promise<Json> {
   const introspectionOptions = {
     descriptions: !minimal,
     directiveIsRepeatable: !minimal,
-    schemaDescription: !minimal
+    schemaDescription: !minimal,
   } satisfies IntrospectionOptions
   try {
     const response = await fetch(url, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
       body: JSON.stringify({
         query: getIntrospectionQuery(introspectionOptions),
-        variable: {}
-      })
+        variable: {},
+      }),
     })
 
     if (!response.ok) throw new Error(`Failed to fetch from ${url}: ${response.statusText}`)
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
-import { fetchJsonSchema, jsonSchemaToSDL } from '#/graphql/schema'
-import { isURL, formatMessages, LANDING_MESSAGE } from '#/utilities'
+import { fetchJsonSchema, jsonSchemaToSDL } from '#/graphql/schema.ts'
+import { isURL, formatMessages, LANDING_MESSAGE } from '#/utilities.ts'
 
 /**
  * Route Options
@@ -27,11 +27,11 @@ export async function handler(request: Request): Promise<Response> {
       )
     }
 
-    if (requestedFormat === 'playground') {
-      const { htmlPage } = await import('#/graphql/graphiql.html')
+    if (['playground', 'graphiql'].includes(requestedFormat)) {
+      const { htmlPage } = await import('#/graphql/graphiql.html.ts')
       return new Response(htmlPage({ endpoint: introspectionURL }), {
         status: 200,
-        headers: { 'Content-Type': 'text/html' }
+        headers: { 'Content-Type': 'text/html' },
       })
     }
 
@@ -42,20 +42,24 @@ export async function handler(request: Request): Promise<Response> {
 
       return new Response(sdlSchema, {
         status: sdlSchema.startsWith('Encountered an error') ? 400 : 200,
-        headers: { 'Content-Type': 'text/plain' }
+        headers: { 'Content-Type': 'text/plain' },
       })
     }
 
     return new Response(JSON.stringify(jsonSchema), {
       status: 200,
-      headers: { 'Content-Type': 'application/json' }
+      headers: { 'Content-Type': 'application/json' },
     })
   } catch (error) {
     const message = error instanceof Error ? error.message : `Encountered an error: ${error}`
     console.error(message)
 
     return new Response(
-      formatMessages(message, 'The introspection URL should be the URL of a GraphQL endpoint.', LANDING_MESSAGE),
+      formatMessages(
+        message,
+        'The introspection URL should be the URL of a GraphQL endpoint.',
+        LANDING_MESSAGE
+      ),
       { status: 500, headers: { 'Content-Type': 'text/plain' } }
     )
   }
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,17 +2,18 @@
   "compilerOptions": {
     "module": "ESNext",
     "target": "ESNext",
+    "noEmit": true,
     "sourceMap": false,
     "skipLibCheck": true,
     "resolveJsonModule": true,
     "verbatimModuleSyntax": true,
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "noUncheckedIndexedAccess": true,
     "allowImportingTsExtensions": true,
     "allowSyntheticDefaultImports": true,
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "noPropertyAccessFromIndexSignature": true,
-    "types": ["node", "bun-types"],
+    "types": ["bun-types"],
     "paths": {
       "#/*": ["./src/*"]
     }
