fix: allow using multiple remote functions within one async derived (#15561)

Fixes #15247

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: dummdidumm

.changeset/famous-kiwis-buy.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: allow using multiple remote functions within one async derived

packages/kit/src/runtime/client/remote-functions/query.svelte.js

@@ -240,21 +240,27 @@ export class Query {
 				const idx = this.#latest.indexOf(resolve);
 				if (idx === -1) return;
 
-				this.#latest.splice(0, idx).forEach((r) => r(undefined));
-				this.#ready = true;
-				this.#loading = false;
-				this.#raw = value;
-				this.#error = undefined;
+				// Untrack this to not trigger mutation validation errors which can occur if you do e.g. $derived({ a: await queryA(), b: await queryB() })
+				untrack(() => {
+					this.#latest.splice(0, idx).forEach((r) => r(undefined));
+					this.#ready = true;
+					this.#loading = false;
+					this.#raw = value;
+					this.#error = undefined;
+				});
 
 				resolve(undefined);
 			})
 			.catch((e) => {
 				const idx = this.#latest.indexOf(resolve);
 				if (idx === -1) return;
 
-				this.#latest.splice(0, idx).forEach((r) => r(undefined));
-				this.#error = e;
-				this.#loading = false;
+				untrack(() => {
+					this.#latest.splice(0, idx).forEach((r) => r(undefined));
+					this.#error = e;
+					this.#loading = false;
+				});
+
 				reject(e);
 			});
 

packages/kit/test/apps/async/src/routes/remote/query-derived-awaits/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { get_a, get_b } from './data.remote.js';
+
+	const values = $derived({
+		a: await get_a(),
+		b: await get_b()
+	});
+</script>
+
+<p id="result">{values.a + values.b}</p>

packages/kit/test/apps/async/src/routes/remote/query-derived-awaits/data.remote.js

@@ -0,0 +1,8 @@
+import { query } from '$app/server';
+
+export const get_a = query(() => 1);
+
+export const get_b = query(async () => {
+	await new Promise((resolve) => setTimeout(resolve, 10));
+	return 2;
+});

packages/kit/test/apps/async/test/test.js

@@ -633,6 +633,14 @@ test.describe('remote functions', () => {
 		}
 	});
 
+	test('awaiting multiple queries inside $derived does not fail mutation validation', async ({
+		page
+	}) => {
+		await page.goto('/remote/query-derived-awaits');
+
+		await expect(page.locator('#result')).toHaveText('3');
+	});
+
 	test('.as(type, value) renders correct values', async ({ page }) => {
 		await page.goto('/remote/form/as-value');