re-enable graphile explorer

Author: Zetazzz

graphile/graphile-cache/package.json

@@ -30,9 +30,10 @@
   },
   "dependencies": {
     "@pgpmjs/logger": "workspace:^",
+    "express": "^5.2.1",
+    "grafserv": "^1.0.0-rc.4",
     "lru-cache": "^11.2.4",
     "pg-cache": "workspace:^",
-    "grafserv": "^1.0.0-rc.4",
     "postgraphile": "^5.0.0-rc.4"
   },
   "devDependencies": {

graphile/graphile-cache/src/create-instance.ts

@@ -0,0 +1,43 @@
+import { createServer } from 'node:http';
+import express from 'express';
+import { postgraphile } from 'postgraphile';
+import { grafserv } from 'grafserv/express/v4';
+import type { GraphileCacheEntry } from './graphile-cache';
+
+interface GraphileInstanceOptions {
+  preset: any;
+  cacheKey: string;
+}
+
+/**
+ * Create a PostGraphile v5 instance backed by grafserv/express.
+ *
+ * This is the shared factory used by both graphql/server and graphql/explorer
+ * to spin up a fully-initialised PostGraphile handler that fits into the
+ * graphile-cache LRU cache.
+ *
+ * Callers are responsible for building the `GraphileConfig.Preset` (including
+ * pgServices, grafserv options, grafast context, etc.) before passing it here.
+ */
+export const createGraphileInstance = async (
+  opts: GraphileInstanceOptions
+): Promise<GraphileCacheEntry> => {
+  const { preset, cacheKey } = opts;
+
+  const pgl = postgraphile(preset);
+  const serv = pgl.createServ(grafserv);
+
+  const handler = express();
+  const httpServer = createServer(handler);
+  await serv.addTo(handler, httpServer);
+  await serv.ready();
+
+  return {
+    pgl,
+    serv,
+    handler,
+    httpServer,
+    cacheKey,
+    createdAt: Date.now(),
+  };
+};

graphile/graphile-cache/src/index.ts

@@ -28,3 +28,6 @@ export {
   // Clear matching entries
   clearMatchingEntries
 } from './graphile-cache';
+
+// Factory for creating PostGraphile v5 instances
+export { createGraphileInstance } from './create-instance';

graphile/graphile-cache/tsconfig.esm.json

@@ -2,6 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "dist/esm",
-    "module": "ESNext"
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "declaration": false
   }
 }

graphile/graphile-cache/tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "module": "nodenext",
+    "moduleResolution": "nodenext"
   },
   "include": ["src/**/*"]
 }

graphql/explorer/package.json

@@ -25,8 +25,8 @@
     "scripts": {
       "clean": "makage clean",
       "prepack": "npm run build",
-      "build": "echo 'SKIPPED: graphql-explorer disabled during v5 migration'",
-      "build:dev": "echo 'SKIPPED: graphql-explorer disabled during v5 migration'",
+      "build": "makage build",
+      "build:dev": "makage build --dev",
     "dev": "ts-node src/run.ts",
     "dev:watch": "nodemon --watch src --ext ts --exec ts-node src/run.ts",
     "lint": "eslint . --fix",
@@ -36,24 +36,20 @@
   "dependencies": {
     "@constructive-io/graphql-env": "workspace:^",
     "@constructive-io/graphql-types": "workspace:^",
-    "@constructive-io/s3-streamer": "workspace:^",
-    "@constructive-io/upload-names": "workspace:^",
     "@constructive-io/url-domains": "workspace:^",
     "@pgpmjs/server-utils": "workspace:^",
-    "@pgpmjs/types": "workspace:^",
     "express": "^5.2.1",
-    "graphile-build": "^4.14.1",
+    "grafserv": "^1.0.0-rc.4",
     "graphile-cache": "workspace:^",
+    "graphile-config": "1.0.0-rc.3",
     "graphile-settings": "workspace:^",
-    "graphql": "15.10.1",
-    "graphql-upload": "^13.0.0",
+    "graphql": "^16.9.0",
     "pg-cache": "workspace:^",
     "pg-env": "workspace:^",
-    "postgraphile": "^4.14.1"
+    "postgraphile": "^5.0.0-rc.4"
   },
   "devDependencies": {
     "@types/express": "^5.0.6",
-    "@types/graphql-upload": "^8.0.12",
     "makage": "^0.1.10",
     "nodemon": "^3.1.10",
     "ts-node": "^10.9.2"

graphql/explorer/src/server.ts

@@ -3,57 +3,59 @@ import type { ConstructiveOptions } from '@constructive-io/graphql-types';
 import { cors, healthz, poweredBy } from '@pgpmjs/server-utils';
 import { middleware as parseDomains } from '@constructive-io/url-domains';
 import express, { Express, NextFunction, Request, Response } from 'express';
-import { GraphileCache, graphileCache } from 'graphile-cache';
-import graphqlUpload from 'graphql-upload';
-// Scalar
-import { getPgPool } from 'pg-cache';
+import { createGraphileInstance, graphileCache, GraphileCacheEntry } from 'graphile-cache';
+import { makePgService } from 'graphile-settings';
+import type { GraphileConfig } from 'graphile-config';
+import { buildConnectionString, getPgPool } from 'pg-cache';
 import { getPgEnvOptions } from 'pg-env';
-import { postgraphile } from 'postgraphile';
 
 import { printDatabases, printSchemas } from './render';
-import { getGraphileSettings } from './settings';
+import { getGraphilePreset } from './settings';
 
 export const GraphQLExplorer = (rawOpts: ConstructiveOptions = {}): Express => {
   const opts = getEnvOptions(rawOpts);
 
   const { pg, server } = opts;
 
-  const getGraphileInstanceObj = (
+  const getGraphileInstanceObj = async (
     dbname: string,
     schemaname: string
-  ): GraphileCache => {
+  ): Promise<GraphileCacheEntry> => {
     const key = `${dbname}.${schemaname}`;
 
-    if (graphileCache.has(key)) {
-      return graphileCache.get(key);
+    const cached = graphileCache.get(key);
+    if (cached) {
+      return cached;
     }
 
-    const settings = {
-      ...getGraphileSettings({
-        ...opts,
-        graphile: { schema: schemaname },
-      }),
-      graphqlRoute: '/graphql',
-      graphiqlRoute: '/graphiql',
-    };
-
-    const pgPool = getPgPool(
-      getPgEnvOptions({
-        ...opts.pg,
-        database: dbname,
-      })
+    const pgConfig = getPgEnvOptions({
+      ...pg,
+      database: dbname,
+    });
+    const connectionString = buildConnectionString(
+      pgConfig.user,
+      pgConfig.password,
+      pgConfig.host,
+      pgConfig.port,
+      pgConfig.database
     );
 
-    const handler = postgraphile(pgPool, schemaname, settings);
-
-    const obj = {
-      pgPool,
-      pgPoolKey: dbname,
-      handler,
+    const basePreset = getGraphilePreset(opts);
+    const preset: GraphileConfig.Preset = {
+      ...basePreset,
+      pgServices: [
+        makePgService({ connectionString, schemas: [schemaname] }),
+      ],
+      grafserv: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        graphiql: true,
+      },
     };
 
-    graphileCache.set(key, obj);
-    return obj;
+    const instance = await createGraphileInstance({ preset, cacheKey: key });
+    graphileCache.set(key, instance);
+    return instance;
   };
 
   const app = express();
@@ -62,7 +64,6 @@ export const GraphQLExplorer = (rawOpts: ConstructiveOptions = {}): Express => {
   cors(app, server.origin);
   app.use(parseDomains());
   app.use(poweredBy('constructive'));
-  app.use(graphqlUpload.graphqlUploadExpress());
 
   app.use(async (req: Request, res: Response, next: NextFunction) => {
     if (req.urlDomains?.subdomains.length === 1) {
@@ -132,8 +133,8 @@ export const GraphQLExplorer = (rawOpts: ConstructiveOptions = {}): Express => {
     if (req.urlDomains?.subdomains.length === 2) {
       const [schemaName, dbName] = req.urlDomains.subdomains;
       try {
-        const { handler } = getGraphileInstanceObj(dbName, schemaName);
-        handler(req, res, next);
+        const instance = await getGraphileInstanceObj(dbName, schemaName);
+        instance.handler(req, res, next);
         return;
       } catch (e: any) {
         res.status(500).send(e.message);

graphql/explorer/tsconfig.esm.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "outDir": "dist/esm",
     "module": "es2022",
+    "moduleResolution": "bundler",
     "rootDir": "src/",
     "declaration": false
   }

graphql/explorer/tsconfig.json

@@ -2,8 +2,10 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "src/"
+    "rootDir": "src/",
+    "module": "nodenext",
+    "moduleResolution": "nodenext"
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["dist", "node_modules", "**/*.spec.*", "**/*.test.*"]
+  "exclude": ["dist", "node_modules", "**/*.spec.*", "**/*.test.*", "src/resolvers/**/*"]
 }