Migrate to Apollo Server v4.

api/package.json

@@ -20,16 +20,21 @@
     "npm": ">= 7"
   },
   "dependencies": {
-    "apollo-server-koa": "^3.11.1",
+    "@apollo/server": "^4.3.0",
+    "@as-integrations/koa": "^0.2.1",
+    "@koa/cors": "^4.0.0",
     "dotenv": "^16.0.3",
     "graphql": "^16.6.0",
     "graphql-upload": "^16.0.2",
     "koa": "^2.14.1",
+    "koa-bodyparser": "^4.3.0",
     "make-dir": "^3.1.0",
     "shortid": "^2.2.16"
   },
   "devDependencies": {
     "@types/koa": "^2.13.5",
+    "@types/koa__cors": "^3.3.0",
+    "@types/koa-bodyparser": "^4.3.10",
     "@types/node": "^18.11.18",
     "eslint": "^8.31.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",

api/readme.md

@@ -3,8 +3,8 @@
 An example GraphQL API using:
 
 - [`koa`](https://npm.im/koa)
-- [`apollo-server-koa`](https://npm.im/apollo-server-koa)
 - [`graphql-upload`](https://npm.im/graphql-upload)
+- [`@as-integrations/koa`](https://npm.im/@as-integrations/koa)
 
 ## Installation
 

api/server.mjs

@@ -2,39 +2,45 @@
 
 import { fileURLToPath } from "node:url";
 
-import { ApolloServer } from "apollo-server-koa";
+import { ApolloServer } from "@apollo/server";
+import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
+import { koaMiddleware as apolloServerKoa } from "@as-integrations/koa";
+import corsKoa from "@koa/cors";
 import graphqlUploadKoa from "graphql-upload/graphqlUploadKoa.mjs";
+import http from "http";
 import Koa from "koa";
+import bodyParserKoa from "koa-bodyparser";
 import makeDir from "make-dir";
 
 import UPLOAD_DIRECTORY_URL from "./config/UPLOAD_DIRECTORY_URL.mjs";
 import schema from "./schema/index.mjs";
 
-/** Starts the API server. */
-async function startServer() {
-  // Ensure the upload directory exists.
-  await makeDir(fileURLToPath(UPLOAD_DIRECTORY_URL));
+// Ensure the upload directory exists.
+await makeDir(fileURLToPath(UPLOAD_DIRECTORY_URL));
 
-  const apolloServer = new ApolloServer({ schema });
+const app = new Koa();
+const httpServer = http.createServer(app.callback());
+const apolloServer = new ApolloServer({
+  schema,
+  plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
+});
 
-  await apolloServer.start();
+await apolloServer.start();
 
-  new Koa()
-    .use(
-      graphqlUploadKoa({
-        // Limits here should be stricter than config for surrounding
-        // infrastructure such as Nginx so errors can be handled elegantly by
-        // `graphql-upload`.
-        maxFileSize: 10000000, // 10 MB
-        maxFiles: 20,
-      })
-    )
-    .use(apolloServer.getMiddleware())
-    .listen(process.env.PORT, () => {
-      console.info(
-        `Serving http://localhost:${process.env.PORT} for ${process.env.NODE_ENV}.`
-      );
-    });
-}
+app.use(corsKoa());
+app.use(
+  graphqlUploadKoa({
+    // Limits here should be stricter than config for surrounding infrastructure
+    // such as NGINX so errors can be handled elegantly by `graphql-upload`.
+    maxFileSize: 10000000, // 10 MB
+    maxFiles: 20,
+  })
+);
+app.use(bodyParserKoa());
+app.use(apolloServerKoa(apolloServer));
 
-startServer();
+httpServer.listen(process.env.PORT, () => {
+  console.info(
+    `Serving http://localhost:${process.env.PORT} for ${process.env.NODE_ENV}.`
+  );
+});

app/pages/_app.mjs

@@ -29,7 +29,12 @@ const createApolloClient = (cache = {}) =>
   new ApolloClient({
     ssrMode: typeof window === "undefined",
     cache: new InMemoryCache().restore(cache),
-    link: createUploadLink({ uri: process.env.API_URI }),
+    link: createUploadLink({
+      uri: process.env.API_URI,
+      headers: {
+        "Apollo-Require-Preflight": "true",
+      },
+    }),
   });
 
 /**