fix: handle empty Headers when serialising Request passed to fetch (#…

…13023)

.changeset/honest-hornets-doubt.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: prevent duplicate fetch request when using Request with load function's fetch

packages/kit/src/runtime/client/client.js

@@ -669,7 +669,9 @@ async function load_node({ loader, parent, url, params, route, server_data_node
 								: await resource.blob(),
 						cache: resource.cache,
 						credentials: resource.credentials,
-						headers: resource.headers,
+						// the headers are undefined on the server if the Headers object is empty
+						// so we need to make sure they are also undefined here if there are no headers
+						headers: [...resource.headers].length ? resource.headers : undefined,
 						integrity: resource.integrity,
 						keepalive: resource.keepalive,
 						method: resource.method,

packages/kit/test/apps/basics/src/routes/load/fetch-request-empty-headers/+page.js

@@ -0,0 +1,6 @@
+/** @type {import('@sveltejs/kit').Load} */
+export async function load({ url, fetch }) {
+	const res = await fetch(new Request(url.origin + '/load/fetch-request.json'));
+	const { answer } = await res.json();
+	return { answer };
+}

packages/kit/test/apps/basics/src/routes/load/fetch-request-empty-headers/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
+<h1>the answer is {data.answer}</h1>

packages/kit/test/apps/basics/test/client.test.js

@@ -252,6 +252,21 @@ test.describe('Load', () => {
 		expect(logs).toContain('Called a patched window.fetch');
 	});
 
+	test('does not repeat fetch on hydration when using Request object', async ({ page }) => {
+		const requests = [];
+		page.on('request', (request) => {
+			if (request.url().includes('/load/fetch-request.json')) {
+				requests.push(request);
+			}
+		});
+
+		await page.goto('/load/fetch-request-empty-headers');
+
+		console.log({ requests });
+
+		expect(requests).toEqual([]);
+	});
+
 	if (process.env.DEV) {
 		test('using window.fetch causes a warning', async ({ page, baseURL }) => {
 			await Promise.all([