Update nextjs 15 (#3509)

* Update nextjs 15 * Ignore connection string in NextJS example * Fix leaks in legacy example --------- Co-authored-by: Arda TANRIKULU <[email protected]>
dotansimha · Nov 26, 2024 · f2255d2 · f2255d2
1 parent fe056b7
commit f2255d2
Show file tree

Hide file tree

Showing 15 changed files with 493 additions and 402 deletions.
diff --git a/examples/file-upload-nextjs-pothos/package.json b/examples/file-upload-nextjs-pothos/package.json
@@ -13,15 +13,15 @@
     "@pothos/core": "4.0.2",
     "graphql": "16.6.0",
     "graphql-yoga": "workspace:*",
-    "next": "13.4.12",
+    "next": "15.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",
     "@whatwg-node/fetch": "^0.10.1",
     "eslint": "8.42.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "15.0.3",
     "typescript": "5.7.2"
   }
 }
diff --git a/examples/nextjs-app/__integration-tests__/nextjs-app.spec.ts b/examples/nextjs-app/__integration-tests__/nextjs-app.spec.ts
@@ -1,33 +1,51 @@
 import cp from 'node:child_process';
+import { createServer } from 'node:http';
+import { AddressInfo } from 'node:net';
 import { join } from 'node:path';
-import { setTimeout as setTimeout$ } from 'node:timers/promises';
 import { fetch } from '@whatwg-node/fetch';
 
-const PORT = 3333;
-
 jest.setTimeout(63_000);
 
-let serverProcess: Proc;
-beforeAll(async () => {
-  const signal = AbortSignal.timeout(60_000);
-  serverProcess = await spawn('pnpm', ['dev'], {
-    signal,
-    env: { PORT: String(PORT) },
+function getAvailablePort() {
+  return new Promise<number>((resolve, reject) => {
+    const server = createServer();
+    server.once('error', reject);
+    server.listen(0, () => {
+      const { port } = server.address() as AddressInfo;
+      server.close(err => {
+        if (err) reject(err);
+        else resolve(port);
+      });
+    });
   });
-  for (;;) {
-    signal.throwIfAborted();
-    try {
-      await fetch(`http://127.0.0.1:${PORT}`, { signal });
-      break;
-    } catch {}
-    await setTimeout$(1_000);
-  }
-});
-afterAll(() => serverProcess.kill());
+}
 
 describe('nextjs 13 App Router', () => {
+  let port: number;
+  let serverProcess: Proc;
+  beforeAll(async () => {
+    port = await getAvailablePort();
+    const signal = AbortSignal.timeout(60_000);
+    const buildProcess = await spawn('pnpm', ['build'], {
+      signal,
+      env: {},
+    });
+    await buildProcess.waitForExit;
+    serverProcess = await spawn('pnpm', ['start'], {
+      signal,
+      env: { PORT: String(port) },
+    });
+    for (;;) {
+      signal.throwIfAborted();
+      try {
+        await fetch(`http://127.0.0.1:${port}`, { signal }).then(res => res.text());
+        break;
+      } catch {}
+    }
+  });
+  afterAll(() => serverProcess.kill());
   it('should show GraphiQL', async () => {
-    const response = await fetch(`http://127.0.0.1:${PORT}/api/graphql`, {
+    const response = await fetch(`http://127.0.0.1:${port}/api/graphql`, {
       headers: {
         accept: 'text/html',
       },
@@ -38,11 +56,12 @@ describe('nextjs 13 App Router', () => {
   });
 
   it('should run basic query', async () => {
-    const response = await fetch(`http://127.0.0.1:${PORT}/api/graphql`, {
+    const response = await fetch(`http://127.0.0.1:${port}/api/graphql`, {
       method: 'POST',
       headers: {
         accept: 'application/json',
         'content-type': 'application/json',
+        connection: 'close',
       },
       body: JSON.stringify({
         query: 'query { greetings }',
@@ -55,17 +74,17 @@ describe('nextjs 13 App Router', () => {
       ...Object.fromEntries(response.headers.entries()),
       date: null,
       'keep-alive': null,
+      connection: null,
     }).toMatchInlineSnapshot(`
-      {
-        "connection": "close",
-        "content-encoding": "gzip",
-        "content-type": "application/json; charset=utf-8",
-        "date": null,
-        "keep-alive": null,
-        "transfer-encoding": "chunked",
-        "vary": "RSC, Next-Router-State-Tree, Next-Router-Prefetch, Accept-Encoding",
-      }
-    `);
+{
+  "connection": null,
+  "content-type": "application/json; charset=utf-8",
+  "date": null,
+  "keep-alive": null,
+  "transfer-encoding": "chunked",
+  "vary": "RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch",
+}
+`);
 
     const json = await response.json();
 
@@ -123,9 +142,9 @@ function spawn(
     proc.once('spawn', () =>
       resolve({
         waitForExit,
-        async kill() {
+        kill() {
           proc.kill();
-          await waitForExit;
+          return waitForExit;
         },
       }),
     );

diff --git a/examples/nextjs-app/app/api/graphql/route.ts b/examples/nextjs-app/app/api/graphql/route.ts
@@ -1,7 +1,11 @@
 // Next.js Custom Route Handler: https://nextjs.org/docs/app/building-your-application/routing/router-handlers
 import { createSchema, createYoga } from 'graphql-yoga';
 
-const { handleRequest } = createYoga({
+interface NextContext {
+  params: Promise<Record<string, string>>;
+}
+
+const { handleRequest } = createYoga<NextContext>({
   schema: createSchema({
     typeDefs: /* GraphQL */ `
       type Query {

diff --git a/examples/nextjs-app/next-env.d.ts b/examples/nextjs-app/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/nextjs-app/package.json b/examples/nextjs-app/package.json
@@ -14,10 +14,10 @@
     "@types/react-dom": "18.2.4",
     "autoprefixer": "10.4.19",
     "eslint": "8.42.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "15.0.3",
     "graphql": "^16.1.0",
     "graphql-yoga": "workspace:*",
-    "next": "13.4.12",
+    "next": "15.0.3",
     "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/examples/nextjs-auth/next-env.d.ts b/examples/nextjs-auth/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/examples/nextjs-auth/package.json b/examples/nextjs-auth/package.json
@@ -10,9 +10,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "graphql": "^16.1.0",
+    "graphql": "^16.9.0",
     "graphql-yoga": "workspace:*",
-    "next": "13.4.12",
+    "next": "15.0.3",
     "next-auth": "4.24.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -21,7 +21,7 @@
   "devDependencies": {
     "@types/react": "18.2.8",
     "eslint": "8.42.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "15.0.3",
     "typescript": "5.7.2"
   }
 }
diff --git a/examples/nextjs-auth/tsconfig.json b/examples/nextjs-auth/tsconfig.json
@@ -13,7 +13,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "jsx": "preserve",
-    "importHelpers": true
+    "importHelpers": true,
+    "isolatedModules": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "dist", "test"]

diff --git a/examples/nextjs-legacy-pages/__integration-tests__/nextjs-legacy.spec.ts b/examples/nextjs-legacy-pages/__integration-tests__/nextjs-legacy.spec.ts
@@ -1,12 +1,13 @@
 import { exec } from 'node:child_process';
+import { createServer } from 'node:http';
+import { AddressInfo } from 'node:net';
 import { join } from 'node:path';
 import { Readable } from 'node:stream';
 import { setTimeout as setTimeout$ } from 'node:timers/promises';
 import { fetch } from '@whatwg-node/fetch';
 
-const PORT = 3334;
-
 describe('NextJS Legacy Pages', () => {
+  let PORT: number;
   it('should show GraphiQL', async () => {
     const response = await fetch(`http://127.0.0.1:${PORT}/api/graphql`, {
       headers: {
@@ -24,6 +25,7 @@ describe('NextJS Legacy Pages', () => {
       headers: {
         accept: 'application/json',
         'content-type': 'application/json',
+        connection: 'close',
       },
       body: JSON.stringify({
         query: 'query { greetings }',
@@ -49,16 +51,32 @@ describe('NextJS Legacy Pages', () => {
   jest.setTimeout(1000 * 60 * 5);
   let serverProcess: ReturnType<typeof cmd>;
 
+  function getAvailablePort() {
+    return new Promise<number>((resolve, reject) => {
+      const server = createServer();
+      server.once('error', reject);
+      server.listen(0, () => {
+        const port = (server.address() as AddressInfo).port;
+        server.close(err => {
+          if (err) reject(err);
+          else resolve(port);
+        });
+      });
+    });
+  }
+
   beforeAll(async () => {
+    PORT = await getAvailablePort();
     serverProcess = cmd(`PORT=${PORT} pnpm dev`);
-    await waitForEndpoint(`http://127.0.0.1:${PORT}`, 5, 1000);
+    return waitForEndpoint(`http://127.0.0.1:${PORT}`, 5, 1000);
   });
 
-  afterAll(async () => {
-    await serverProcess?.stop().catch(err => {
-      console.error('Failed to stop server process', err);
-    });
-  });
+  afterAll(
+    () =>
+      serverProcess?.stop().catch(err => {
+        console.error('Failed to stop server process', err);
+      }),
+  );
 });
 
 function cmd(cmd: string) {
@@ -71,15 +89,15 @@ function cmd(cmd: string) {
   const getStderr = saveOut(cp.stderr!);
 
   const exited = new Promise<string>((resolve, reject) => {
-    cp.on('close', async (code: number) => {
+    cp.once('close', async (code: number) => {
       const out = getStdout();
       const err = getStderr();
       if (out) console.log(out);
       if (err) console.error(err);
 
-      return code === 0 ? resolve(out) : reject(new Error(err));
+      return code ? resolve(out) : reject(new Error(`Process exited with code ${code}; \n ${err}`));
     });
-    cp.on('error', error => {
+    cp.once('error', error => {
       console.error(error);
       reject(error);
     });
@@ -114,6 +132,9 @@ export async function waitForEndpoint(
         throw new Error(`Endpoint not ready yet, status code is ${r.status}`);
       }
 
+      await r.text();
+
+      console.info(`Connected to endpoint: ${endpoint}`);
       return true;
     } catch (e) {
       console.warn(

diff --git a/examples/nextjs-legacy-pages/next-env.d.ts b/examples/nextjs-legacy-pages/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/examples/nextjs-legacy-pages/package.json b/examples/nextjs-legacy-pages/package.json
@@ -14,7 +14,7 @@
     "@types/react": "18.2.8",
     "graphql": "^16.1.0",
     "graphql-yoga": "workspace:*",
-    "next": "13.4.12",
+    "next": "15.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tslib": "2.6.3"
@@ -24,7 +24,7 @@
     "@types/react": "18.2.8",
     "esbuild": "0.17.19",
     "eslint": "8.42.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "15.0.3",
     "typescript": "5.7.2"
   }
 }
diff --git a/examples/nextjs-ws/package.json b/examples/nextjs-ws/package.json
@@ -12,7 +12,7 @@
     "graphql": "^16.1.0",
     "graphql-ws": "^5.11.3",
     "graphql-yoga": "workspace:*",
-    "next": "13.4.12",
+    "next": "15.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "ws": "8.13.0"
@@ -22,7 +22,7 @@
     "@types/react": "18.2.8",
     "@types/ws": "8.5.4",
     "eslint": "8.42.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "15.0.3",
     "typescript": "5.7.2"
   }
 }