From fbd628ecdb5b909a5e9d3bfbd94ca7c70f2fedbb Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Fri, 5 May 2023 17:04:33 +0545
Subject: [PATCH] fix: client state stale after invalidate (#9798)

fixes #9796
---
 .changeset/tender-beds-smile.md                |  5 +++++
 packages/kit/src/runtime/client/client.js      |  3 +++
 .../src/routes/actions/enhance/+page.server.js | 18 ++++++++++++++++--
 .../src/routes/actions/enhance/+page.svelte    |  9 +++++++++
 .../kit/test/apps/basics/test/client.test.js   | 13 +++++++++++++
 packages/kit/test/apps/basics/test/test.js     |  2 +-
 packages/kit/test/setup.js                     |  5 +++--
 7 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/tender-beds-smile.md

diff --git a/.changeset/tender-beds-smile.md b/.changeset/tender-beds-smile.md
new file mode 100644
index 000000000000..c381dd7ce379
--- /dev/null
+++ b/.changeset/tender-beds-smile.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: update `$page.data` correctly after invalidate
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index c27ddfaf9fba..81fcb59e8dcd 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -171,6 +171,9 @@ export function create_client(app, target) {
 			if (navigation_result.type === 'redirect') {
 				return goto(new URL(navigation_result.location, url).href, {}, [url.pathname], nav_token);
 			} else {
+				if (navigation_result.props.page !== undefined) {
+					page = navigation_result.props.page;
+				}
 				root.$set(navigation_result.props);
 			}
 		}
diff --git a/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.server.js b/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.server.js
index db3fe786c516..5f0c4ad0025f 100644
--- a/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.server.js
+++ b/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.server.js
@@ -1,9 +1,12 @@
 import { error } from '@sveltejs/kit';
 
 /** @type {import('./$types').PageServerLoad} */
-export function load() {
+export function load({ cookies }) {
+	const enhance_counter = +(cookies.get('enhance-counter') ?? 0);
+
 	return {
-		initial: 'initial'
+		initial: 'initial',
+		enhance_counter
 	};
 }
 
@@ -39,5 +42,16 @@ export const actions = {
 		return {
 			message: data.get('message')
 		};
+	},
+	counter: async ({ cookies }) => {
+		let count = +(cookies.get('enhance-counter') ?? 0);
+
+		count += 1;
+
+		cookies.set('enhance-counter', count + '', {
+			path: '/actions/enhance'
+		});
+
+		return {};
 	}
 };
diff --git a/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.svelte b/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.svelte
index 5c63d42a5e66..fc33aeb7b8c5 100644
--- a/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/actions/enhance/+page.svelte
@@ -5,11 +5,16 @@
 	/** @type {import('./$types').ActionData} */
 	export let form;
 
+	/** @type {import('./$types').PageData} */
+	export let data;
+
 	/** @type {AbortController | undefined} */
 	let previous;
 	let count = 0;
 </script>
 
+<pre class="data1">prop: {data.enhance_counter}, store: {$page.data.enhance_counter}</pre>
+
 <pre class="formdata1">{JSON.stringify(form)}</pre>
 <pre class="formdata2">{JSON.stringify($page.form)}</pre>
 
@@ -42,3 +47,7 @@
 	<input name="message" type="text" value={form?.message ?? ''} />
 	<button class="form3">Submit</button>
 </form>
+
+<form action="?/counter" method="post" use:enhance>
+	<button class="form4">Submit</button>
+</form>
diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js
index b8f3069e9611..bf8a748c0668 100644
--- a/packages/kit/test/apps/basics/test/client.test.js
+++ b/packages/kit/test/apps/basics/test/client.test.js
@@ -775,3 +775,16 @@ test.describe('Streaming', () => {
 		});
 	}
 });
+
+test.describe('Actions', () => {
+	test('page store has correct data', async ({ page }) => {
+		await page.goto('/actions/enhance');
+		const pre = page.locator('pre.data1');
+
+		await expect(pre).toHaveText(`prop: 0, store: 0`);
+		await page.locator('.form4').click();
+		await expect(pre).toHaveText(`prop: 1, store: 1`);
+		await page.evaluate('window.svelte_tick()');
+		await expect(pre).toHaveText(`prop: 1, store: 1`);
+	});
+});
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
index 240041916c84..6b976d2eee5d 100644
--- a/packages/kit/test/apps/basics/test/test.js
+++ b/packages/kit/test/apps/basics/test/test.js
@@ -911,7 +911,7 @@ test.describe('Actions', () => {
 			await page.goto('/actions/enhance');
 		}
 
-		expect(await page.textContent('pre')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
 	});
 
 	test('applyAction redirects', async ({ page, javaScriptEnabled }) => {
diff --git a/packages/kit/test/setup.js b/packages/kit/test/setup.js
index 60931035115d..d6d34f54a815 100644
--- a/packages/kit/test/setup.js
+++ b/packages/kit/test/setup.js
@@ -6,7 +6,7 @@ import {
 	beforeNavigate,
 	afterNavigate
 } from '$app/navigation';
-import { onMount } from 'svelte';
+import { onMount, tick } from 'svelte';
 
 export function setup() {
 	onMount(() => {
@@ -17,7 +17,8 @@ export function setup() {
 			preloadCode,
 			preloadData,
 			beforeNavigate,
-			afterNavigate
+			afterNavigate,
+			svelte_tick: tick
 		});
 
 		// communicate that the app is ready