fix(serverless): fix broken response handling for itty-router >= 5.0.17 (#686)

Author: Gabrola

.changeset/fast-cooks-drive.md

@@ -0,0 +1,5 @@
+---
+'@ts-rest/serverless': minor
+---
+
+New `createFetchHandler` function added so a fetch handler can be initialized once and re-used

.changeset/wise-spiders-impress.md

@@ -0,0 +1,5 @@
+---
+'@ts-rest/serverless': patch
+---
+
+Fix response handling for itty-router >= 5.0.17

libs/ts-rest/serverless/src/lib/handlers/ts-rest-fetch.spec.ts

@@ -2,7 +2,12 @@ import { initContract, TsRestResponseError } from '@ts-rest/core';
 import { parse as parseMultipart, getBoundary } from 'parse-multipart-data';
 import { z } from 'zod';
 import { vi } from 'vitest';
-import { fetchRequestHandler, tsr } from './ts-rest-fetch';
+import {
+  createFetchHandler,
+  FetchHandlerOptions,
+  fetchRequestHandler,
+  tsr,
+} from './ts-rest-fetch';
 import { RequestValidationErrorSchema } from '../types';
 
 const c = initContract();
@@ -142,22 +147,26 @@ const router = tsr
     throw new Error('Test error');
   });
 
+const options = {
+  jsonQuery: true,
+  responseValidation: true,
+  cors: {
+    origin: ['http://localhost'],
+    credentials: true,
+  },
+} as FetchHandlerOptions<{}, { foo: string }>;
+
 const testFetchRequestHandler = (request: Request) => {
   return fetchRequestHandler({
     contract,
     router,
-    options: {
-      jsonQuery: true,
-      responseValidation: true,
-      cors: {
-        origin: ['http://localhost'],
-        credentials: true,
-      },
-    },
+    options,
     request,
   });
 };
 
+const newFetchRequestHandler = createFetchHandler(contract, router, options);
+
 describe('fetchRequestHandler', () => {
   afterEach(() => {
     vi.clearAllMocks();
@@ -194,7 +203,7 @@ describe('fetchRequestHandler', () => {
       body: JSON.stringify({ ping: 'foo' }),
     });
 
-    const response = await testFetchRequestHandler(request);
+    const response = await newFetchRequestHandler(request);
     const expectedResponse = new Response('{"id":123,"pong":"foo"}', {
       headers: {
         'access-control-allow-credentials': 'true',
@@ -270,7 +279,7 @@ describe('fetchRequestHandler', () => {
       body: JSON.stringify({ ping: 'foo' }),
     });
 
-    const response = await testFetchRequestHandler(request);
+    const response = await newFetchRequestHandler(request);
     const expectedResponse = new Response(null, {
       status: 500,
       headers: {
@@ -356,7 +365,7 @@ describe('fetchRequestHandler', () => {
       headers: { origin: 'http://localhost' },
     });
 
-    const response = await testFetchRequestHandler(request);
+    const response = await newFetchRequestHandler(request);
     const expectedResponse = new Response(null, {
       status: 500,
       headers: {

libs/ts-rest/serverless/src/lib/handlers/ts-rest-fetch.ts

@@ -17,6 +17,33 @@ export type FetchHandlerOptions<
   TRequestExtension = {},
 > = ServerlessHandlerOptions<TPlatformContext, TRequestExtension>;
 
+export const createFetchHandler = <
+  T extends AppRouter,
+  TRequestExtension,
+  TPlatformContext = {},
+>(
+  contract: T,
+  router: RouterImplementationOrFluentRouter<
+    T,
+    TPlatformContext,
+    TRequestExtension
+  >,
+  options: FetchHandlerOptions<TPlatformContext, TRequestExtension> = {},
+) => {
+  const serverlessRouter = createServerlessRouter<
+    T,
+    TPlatformContext,
+    TRequestExtension
+  >(contract, router, options);
+
+  return async (request: Request, platformContext?: TPlatformContext) => {
+    const tsRestRequest = new TsRestRequest(request);
+    return serverlessRouter.fetch(tsRestRequest, {
+      ...platformContext,
+    });
+  };
+};
+
 export const fetchRequestHandler = <
   T extends AppRouter,
   TRequestExtension,
@@ -43,6 +70,7 @@ export const fetchRequestHandler = <
     TPlatformContext,
     TRequestExtension
   >(contract, router, options);
+
   const tsRestRequest = new TsRestRequest(request);
   return serverlessRouter.fetch(tsRestRequest, {
     ...platformContext,

libs/ts-rest/serverless/src/lib/response.ts

@@ -34,4 +34,8 @@ export class TsRestResponse extends Response {
       headers,
     });
   }
+
+  override clone() {
+    return new TsRestResponse(this.rawBody, this);
+  }
 }

libs/ts-rest/serverless/src/lib/router.ts

@@ -1,7 +1,5 @@
 import {
   AppRoute,
-  AppRouteMutation,
-  AppRouteQuery,
   AppRouter,
   checkZodSchema,
   isAppRoute,
@@ -139,21 +137,20 @@ const tsRestMiddleware = <TPlatformArgs, TRequestExtension>(
     }
   };
 
-  const preflight = (
-    request: TsRestRequest & { preflightCorsHeadersSet: boolean },
-  ): TsRestResponse | void => {
+  type RequestWithPreflightContext = TsRestRequest & {
+    preflightCorsHeadersSet: boolean;
+  };
+
+  const preflight = (request: TsRestRequest): TsRestResponse | void => {
     const preflightResult = ittyPreflight(request);
     if (preflightResult) {
-      request.preflightCorsHeadersSet = true;
+      (request as RequestWithPreflightContext).preflightCorsHeadersSet = true;
       return new TsRestResponse(null, preflightResult);
     }
   };
 
-  const corsify = (
-    response: TsRestResponse,
-    request: TsRestRequest & { preflightCorsHeadersSet: boolean },
-  ) => {
-    if (!request.preflightCorsHeadersSet) {
+  const corsify = (response: TsRestResponse, request: TsRestRequest) => {
+    if (!(request as RequestWithPreflightContext).preflightCorsHeadersSet) {
       return ittyCorsify(response, request);
     }
     return response;

package.json

@@ -68,7 +68,7 @@
     "docusaurus-plugin-typedoc": "^0.20.0",
     "express": "4.19.2",
     "fastify": "4.28.0",
-    "itty-router": "^5.0.9",
+    "itty-router": "^5.0.18",
     "jsonwebtoken": "^9.0.0",
     "lodash": "^4.17.21",
     "multer": "1.4.5-lts.1",
@@ -136,7 +136,7 @@
     "@types/jest": "29.4.4",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/lodash": "^4.14.195",
-    "@types/node": "18.11.9",
+    "@types/node": "20.16.1",
     "@types/passport": "^1.0.12",
     "@types/passport-jwt": "^3.0.8",
     "@types/react": "18.3.1",