From 2ef9b7d124809ce6a9804abbeaa4647a99fac97c Mon Sep 17 00:00:00 2001
From: Tee Ming <chewteeming01@gmail.com>
Date: Fri, 3 Feb 2023 20:12:06 +0800
Subject: [PATCH] fix: correctly serialize request url when using load `fetch`
 (#8876)

fixes #8852

Slices the origin from any client fetch request URLs so that they're always similar in format to fetches done on the server, which is important to find cached responses

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/silent-icons-guess.md                      |  5 +++++
 packages/kit/src/runtime/client/client.js             | 11 ++++++++---
 .../basics/src/routes/load/serialization/+page.js     |  4 ++--
 packages/kit/test/apps/basics/test/test.js            |  4 +++-
 4 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/silent-icons-guess.md

diff --git a/.changeset/silent-icons-guess.md b/.changeset/silent-icons-guess.md
new file mode 100644
index 000000000000..84f11ea69c0a
--- /dev/null
+++ b/.changeset/silent-icons-guess.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: correctly serialize request url when using load `fetch`
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index 49b034ab30b9..ef4cf180da25 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -594,12 +594,17 @@ export function create_client({ target }) {
 					}
 
 					// we must fixup relative urls so they are resolved from the target page
-					const resolved = new URL(requested, url).href;
-					depends(resolved);
+					const resolved = new URL(requested, url);
+					depends(resolved.href);
+
+					// match ssr serialized data url, which is important to find cached responses
+					if (resolved.origin === url.origin) {
+						requested = resolved.href.slice(url.origin.length);
+					}
 
 					// prerendered pages may be served from any origin, so `initial_fetch` urls shouldn't be resolved
 					return started
-						? subsequent_fetch(requested, resolved, init)
+						? subsequent_fetch(requested, resolved.href, init)
 						: initial_fetch(requested, init);
 				},
 				setHeaders: () => {}, // noop
diff --git a/packages/kit/test/apps/basics/src/routes/load/serialization/+page.js b/packages/kit/test/apps/basics/src/routes/load/serialization/+page.js
index fc0d82c6deb6..72f7c4d96c37 100644
--- a/packages/kit/test/apps/basics/src/routes/load/serialization/+page.js
+++ b/packages/kit/test/apps/basics/src/routes/load/serialization/+page.js
@@ -1,8 +1,8 @@
 /** @type {import('./$types').PageLoad} */
-export async function load({ fetch, data }) {
+export async function load({ fetch, data, url }) {
 	const { a } = data;
 
-	const res = await fetch('/load/serialization/fetched-from-shared.json');
+	const res = await fetch(new URL('/load/serialization/fetched-from-shared.json', url.origin));
 	const { b } = await res.json();
 
 	return { a, b, c: a + b };
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
index e67b827bc14a..cd95a60439dc 100644
--- a/packages/kit/test/apps/basics/test/test.js
+++ b/packages/kit/test/apps/basics/test/test.js
@@ -211,7 +211,9 @@ test.describe('Load', () => {
 
 		if (!javaScriptEnabled) {
 			// by the time JS has run, hydration will have nuked these scripts
-			const script_contents = await page.innerHTML('script[data-sveltekit-fetched]');
+			const script_contents = await page.innerHTML(
+				'script[data-sveltekit-fetched][data-url="/load/serialization/fetched-from-shared.json"]'
+			);
 
 			const payload = '{"status":200,"statusText":"","headers":{},"body":"{\\"b\\":2}"}';