fix(HttpResponse): forward cookies only when response is used (#2728)

Author: kettanaito

src/core/handlers/RequestHandler.ts

@@ -1,3 +1,4 @@
+import { Headers as HeadersPolyfill } from 'headers-polyfill'
 import { getCallFrame } from '../utils/internal/getCallFrame'
 import {
   isIterable,
@@ -12,6 +13,7 @@ import {
   type DefaultUnsafeFetchResponse,
 } from '../HttpResponse'
 import type { GraphQLRequestBody } from './GraphQLHandler'
+import { getRawSetCookie } from '../utils/HttpResponse/decorators'
 
 export type DefaultRequestMultipartBody = Record<
   string,
@@ -335,7 +337,7 @@ export abstract class RequestHandler<
         ...resolverExtras,
         requestId: args.requestId,
         request: args.request,
-      }) as Promise<Response>
+      }) as Promise<Response | undefined>
     ).catch((errorOrResponse) => {
       // Allow throwing a Response instance in a response resolver.
       if (errorOrResponse instanceof Response) {
@@ -348,6 +350,10 @@ export abstract class RequestHandler<
 
     const mockedResponse = await mockedResponsePromise
 
+    if (mockedResponse) {
+      forwardResponseCookies(mockedResponse)
+    }
+
     const executionResult = this.createExecutionResult({
       // Pass the cloned request to the result so that logging
       // and other consumers could read its body once more.
@@ -416,3 +422,32 @@ export abstract class RequestHandler<
     }
   }
 }
+
+/**
+ * Forwards the cookies from the given response to `document.cookie`.
+ */
+export function forwardResponseCookies(response: Response): void {
+  // Cookie forwarding is only relevant in the browser.
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const responseCookies = getRawSetCookie(response)
+
+  if (!responseCookies) {
+    return
+  }
+
+  // Write the mocked response cookies to the document.
+  // Use `headers-polyfill` to get the Set-Cookie header value correctly.
+  // This is an alternative until TypeScript 5.2
+  // and Node.js v20 become the minimum supported versions
+  // and "Headers.prototype.getSetCookie" can be used directly.
+  const allResponseCookies = HeadersPolyfill.prototype.getSetCookie.call(
+    new Headers([['set-cookie', responseCookies]]),
+  )
+
+  for (const cookieString of allResponseCookies) {
+    document.cookie = cookieString
+  }
+}

src/core/utils/HttpResponse/decorators.ts

@@ -1,10 +1,9 @@
 import statuses from '../../../shims/statuses'
-import { Headers as HeadersPolyfill } from 'headers-polyfill'
 import type { HttpResponseInit } from '../../HttpResponse'
 
 const { message } = statuses
 
-export const kSetCookie = Symbol('kSetCookie')
+const kSetCookie = Symbol('kSetCookie')
 
 export interface HttpResponseDecoratedInit extends HttpResponseInit {
   status: number
@@ -31,7 +30,7 @@ export function decorateResponse(
   response: Response,
   init: HttpResponseDecoratedInit,
 ): Response {
-  // Allow to mock the response type.
+  // Allow mocking the response type.
   if (init.type) {
     Object.defineProperty(response, 'type', {
       value: init.type,
@@ -52,25 +51,11 @@ export function decorateResponse(
       enumerable: false,
       writable: false,
     })
-
-    // Cookie forwarding is only relevant in the browser.
-    if (typeof document !== 'undefined') {
-      // Write the mocked response cookies to the document.
-      // Use `headers-polyfill` to get the Set-Cookie header value correctly.
-      // This is an alternative until TypeScript 5.2
-      // and Node.js v20 become the minimum supported version
-      // and getSetCookie in Headers can be used directly.
-      const responseCookiePairs = HeadersPolyfill.prototype.getSetCookie.call(
-        init.headers,
-      )
-
-      for (const cookieString of responseCookiePairs) {
-        // No need to parse the cookie headers because it's defined
-        // as the valid cookie string to begin with.
-        document.cookie = cookieString
-      }
-    }
   }
 
   return response
 }
+
+export function getRawSetCookie(response: Response): string | undefined {
+  return Reflect.get(response, kSetCookie)
+}

src/core/utils/request/storeResponseCookies.ts

@@ -1,15 +1,13 @@
 import { cookieStore } from '../cookieStore'
-import { kSetCookie } from '../HttpResponse/decorators'
+import { getRawSetCookie } from '../HttpResponse/decorators'
 
 export async function storeResponseCookies(
   request: Request,
   response: Response,
 ): Promise<void> {
   // Grab the raw "Set-Cookie" response header provided
   // in the HeadersInit for this mocked response.
-  const responseCookies = Reflect.get(response, kSetCookie) as
-    | string
-    | undefined
+  const responseCookies = getRawSetCookie(response)
 
   if (responseCookies) {
     await cookieStore.setCookie(responseCookies, request.url)

test/browser/rest-api/request/request-cookies.mocks.ts

@@ -6,6 +6,12 @@ const worker = setupWorker(
     return HttpResponse.json(cookies)
   }),
   http.post('/set-cookies', async ({ request }) => {
+    new HttpResponse(null, {
+      headers: {
+        'Set-Cookie': 'must-not=be-set',
+      },
+    })
+
     return new HttpResponse(null, {
       headers: {
         'Set-Cookie': await request.clone().text(),