From 1dfa20e7d8e27fbdca99067619b16e1ca125f4a2 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 2 Dec 2022 15:38:29 +0100
Subject: [PATCH] [fix] use searchParams for x-sveltekit-invalidated (#7912)

..instead of Vary, because that header is not supported on all CDNs/platforms, leading to wrong cache behavior
---
 .changeset/heavy-forks-search.md                  |  5 +++++
 packages/kit/src/runtime/client/client.js         | 13 ++++++++-----
 packages/kit/src/runtime/server/data/index.js     |  3 ++-
 packages/kit/src/runtime/server/index.js          | 12 +-----------
 packages/kit/test/apps/basics/test/client.test.js |  7 ++++---
 5 files changed, 20 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/heavy-forks-search.md

diff --git a/.changeset/heavy-forks-search.md b/.changeset/heavy-forks-search.md
new file mode 100644
index 000000000000..7d8090c1a173
--- /dev/null
+++ b/.changeset/heavy-forks-search.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] use searchParams for x-sveltekit-invalidated
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index 8e5f2498134c..3957e2d57439 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -1700,12 +1700,15 @@ export function create_client({ target, base }) {
 async function load_data(url, invalid) {
 	const data_url = new URL(url);
 	data_url.pathname = add_data_suffix(url.pathname);
+	if (__SVELTEKIT_DEV__ && url.searchParams.has('x-sveltekit-invalidated')) {
+		throw new Error('Cannot used reserved query parameter "x-sveltekit-invalidated"');
+	}
+	data_url.searchParams.append(
+		'x-sveltekit-invalidated',
+		invalid.map((x) => (x ? '1' : '')).join('_')
+	);
 
-	const res = await native_fetch(data_url.href, {
-		headers: {
-			'x-sveltekit-invalidated': invalid.map((x) => (x ? '1' : '')).join(',')
-		}
-	});
+	const res = await native_fetch(data_url.href);
 	const data = await res.json();
 
 	if (!res.ok) {
diff --git a/packages/kit/src/runtime/server/data/index.js b/packages/kit/src/runtime/server/data/index.js
index f66d2fdac11f..b249f0b38052 100644
--- a/packages/kit/src/runtime/server/data/index.js
+++ b/packages/kit/src/runtime/server/data/index.js
@@ -27,8 +27,9 @@ export async function render_data(event, route, options, state, trailing_slash)
 		const node_ids = [...route.page.layouts, route.page.leaf];
 
 		const invalidated =
-			event.request.headers.get(INVALIDATED_HEADER)?.split(',').map(Boolean) ??
+			event.url.searchParams.get(INVALIDATED_HEADER)?.split('_').map(Boolean) ??
 			node_ids.map(() => true);
+		event.url.searchParams.delete(INVALIDATED_HEADER);
 
 		let aborted = false;
 
diff --git a/packages/kit/src/runtime/server/index.js b/packages/kit/src/runtime/server/index.js
index 496e56058df3..c64894c8caa8 100644
--- a/packages/kit/src/runtime/server/index.js
+++ b/packages/kit/src/runtime/server/index.js
@@ -13,7 +13,7 @@ import {
 	strip_data_suffix
 } from '../../utils/url.js';
 import { exec } from '../../utils/routing.js';
-import { INVALIDATED_HEADER, redirect_json_response, render_data } from './data/index.js';
+import { redirect_json_response, render_data } from './data/index.js';
 import { add_cookies_to_headers, get_cookies } from './cookie.js';
 import { create_fetch } from './fetch.js';
 import { Redirect } from '../control.js';
@@ -230,16 +230,6 @@ export async function respond(request, options, state) {
 						response.headers.set(key, /** @type {string} */ (value));
 					}
 
-					if (is_data_request) {
-						// set the Vary header on __data.json requests to ensure we don't cache
-						// incomplete responses with skipped data loads
-						// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary
-						const vary = response.headers.get('Vary');
-						if (vary !== '*') {
-							response.headers.append('Vary', INVALIDATED_HEADER);
-						}
-					}
-
 					add_cookies_to_headers(response.headers, Object.values(new_cookies));
 
 					if (state.prerendering && event.route.id !== null) {
diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js
index 5759ee181f54..ed5270f285dc 100644
--- a/packages/kit/test/apps/basics/test/client.test.js
+++ b/packages/kit/test/apps/basics/test/client.test.js
@@ -101,14 +101,15 @@ test.describe('a11y', () => {
 });
 
 test.describe('Caching', () => {
-	test('caches __data.json requests with Vary header', async ({ page, app }) => {
+	test('caches __data.json requests with invalidated search param', async ({ page, app }) => {
 		await page.goto('/');
 		const [, response] = await Promise.all([
 			app.goto('/caching/server-data'),
-			page.waitForResponse((request) => request.url().endsWith('server-data/__data.json'))
+			page.waitForResponse((request) =>
+				request.url().endsWith('server-data/__data.json?x-sveltekit-invalidated=_1')
+			)
 		]);
 		expect(response.headers()['cache-control']).toBe('public, max-age=30');
-		expect(response.headers()['vary']).toBe('x-sveltekit-invalidated');
 	});
 });