From 2ef9b7d124809ce6a9804abbeaa4647a99fac97c Mon Sep 17 00:00:00 2001 From: Tee Ming 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}"}';