fix: use window.fetch for server load fetch requests (#13315)

This PR ensures that this server-load data request is also patchable by basically using the same mechanism introduced in #10009

Author: Lms24

.changeset/funny-moles-scream.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: use current `window.fetch` for server load fetch requests

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

@@ -8,13 +8,7 @@ import {
 	make_trackable,
 	normalize_path
 } from '../../utils/url.js';
-import {
-	initial_fetch,
-	lock_fetch,
-	native_fetch,
-	subsequent_fetch,
-	unlock_fetch
-} from './fetcher.js';
+import { dev_fetch, initial_fetch, lock_fetch, subsequent_fetch, unlock_fetch } from './fetcher.js';
 import { parse } from './parse.js';
 import * as storage from './session-storage.js';
 import {
@@ -2548,7 +2542,9 @@ async function load_data(url, invalid) {
 	}
 	data_url.searchParams.append(INVALIDATED_PARAM, invalid.map((i) => (i ? '1' : '0')).join(''));
 
-	const res = await native_fetch(data_url.href);
+	// use window.fetch directly to allow using a 3rd party-patched fetch implementation
+	const fetcher = DEV ? dev_fetch : window.fetch;
+	const res = await fetcher(data_url.href, {});
 
 	if (!res.ok) {
 		// error message is a JSON-stringified string which devalue can't handle at the top level

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

@@ -5,7 +5,7 @@ import { b64_decode } from '../utils.js';
 let loading = 0;
 
 /** @type {typeof fetch} */
-export const native_fetch = BROWSER ? window.fetch : /** @type {any} */ (() => {});
+const native_fetch = BROWSER ? window.fetch : /** @type {any} */ (() => {});
 
 export function lock_fetch() {
 	loading += 1;
@@ -137,7 +137,7 @@ export function subsequent_fetch(resource, resolved, opts) {
  * @param {RequestInfo | URL} resource
  * @param {RequestInit & Record<string, any> | undefined} opts
  */
-function dev_fetch(resource, opts) {
+export function dev_fetch(resource, opts) {
 	const patched_opts = { ...opts };
 	// This assigns the __sveltekit_fetch__ flag and makes it non-enumerable
 	Object.defineProperty(patched_opts, '__sveltekit_fetch__', {

packages/kit/test/apps/basics/src/routes/load/window-fetch/patching-server-load-ii/+page.server.js

@@ -0,0 +1,3 @@
+export async function load() {
+	return { msg: 'server load data' };
+}

packages/kit/test/apps/basics/src/routes/load/window-fetch/patching-server-load-ii/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+	export let data;
+</script>
+
+<p>
+	This page makes a fetch request to the server to get the data from the server load function when
+	users navigate to it.
+</p>
+
+<h1>{data.msg}</h1>

packages/kit/test/apps/basics/src/routes/load/window-fetch/patching-server-load/+page.server.js

@@ -0,0 +1,3 @@
+export async function load() {
+	return { msg: 'server load data' };
+}

packages/kit/test/apps/basics/src/routes/load/window-fetch/patching-server-load/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { browser } from '$app/environment';
+
+	if (browser) {
+		const original_fetch = window.fetch;
+		window.fetch = (input, init) => {
+			console.log('Called a patched window.fetch for server load request');
+			return original_fetch(input, init);
+		};
+	}
+</script>
+
+<p>
+	The sole purpose of this page is to apply a `window.fetch` patch before navigating to the next
+	page. Click the link below to navigate to the next page with a server load function.
+</p>
+
+<a href="./patching-server-load-ii">Go To Page with Server Load</a>

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

@@ -252,6 +252,23 @@ test.describe('Load', () => {
 		expect(logs).toContain('Called a patched window.fetch');
 	});
 
+	test('permits 3rd party patching of server load fetch requests', async ({ page }) => {
+		const logs = [];
+		page.on('console', (msg) => {
+			if (msg.type() === 'log') {
+				logs.push(msg.text());
+			}
+		});
+
+		await page.goto('/load/window-fetch/patching-server-load');
+
+		await page.getByText('Go To Page with Server Load').click();
+
+		expect(await page.textContent('h1')).toBe('server load data');
+
+		expect(logs).toContain('Called a patched window.fetch for server load request');
+	});
+
 	test('does not repeat fetch on hydration when using Request object', async ({ page }) => {
 		const requests = [];
 		page.on('request', (request) => {