fix: use validated args in batch resolver (alternative approach)

.changeset/rude-islands-flow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: use validated args in batch resolver in both csr and ssr

packages/kit/src/runtime/app/server/remote/command.js

@@ -78,7 +78,9 @@ export function command(validate_or_fn, maybe_fn) {
 
 		state.refreshes ??= {};
 
-		const promise = Promise.resolve(run_remote_function(event, state, true, arg, validate, fn));
+		const promise = Promise.resolve(
+			run_remote_function(event, state, true, () => validate(arg), fn)
+		);
 
 		// @ts-expect-error
 		promise.updates = () => {

packages/kit/src/runtime/app/server/remote/form.js

@@ -145,8 +145,7 @@ export function form(validate_or_fn, maybe_fn) {
 							event,
 							state,
 							true,
-							data,
-							(d) => d,
+							() => data,
 							(data) => (!maybe_fn ? fn() : fn(data, issue))
 						);
 					} catch (e) {

packages/kit/src/runtime/app/server/remote/prerender.js

@@ -131,7 +131,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 			}
 
 			const promise = get_response(__, arg, state, () =>
-				run_remote_function(event, state, false, arg, validate, fn)
+				run_remote_function(event, state, false, () => validate(arg), fn)
 			);
 
 			if (state.prerendering) {

packages/kit/src/runtime/app/server/remote/query.js

@@ -5,6 +5,8 @@ import { get_request_store } from '@sveltejs/kit/internal/server';
 import { create_remote_key, stringify_remote_arg } from '../../../shared.js';
 import { prerendering } from '__sveltekit/environment';
 import { create_validator, get_cache, get_response, run_remote_function } from './shared.js';
+import { handle_error_and_jsonify } from '../../../server/utils.js';
+import { HttpError, SvelteKitError } from '@sveltejs/kit/internal';
 
 /**
  * Creates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.
@@ -73,7 +75,7 @@ export function query(validate_or_fn, maybe_fn) {
 		const { event, state } = get_request_store();
 
 		const get_remote_function_result = () =>
-			run_remote_function(event, state, false, arg, validate, fn);
+			run_remote_function(event, state, false, () => validate(arg), fn);
 
 		/** @type {Promise<any> & Partial<RemoteQuery<any>>} */
 		const promise = get_response(__, arg, state, get_remote_function_result);
@@ -148,17 +150,34 @@ function batch(validate_or_fn, maybe_fn) {
 		type: 'query_batch',
 		id: '',
 		name: '',
-		run: (args) => {
+		run: async (args, options) => {
 			const { event, state } = get_request_store();
 
-			return run_remote_function(
+			/** @type {any[]} */
+			let validated = [];
+
+			const get_result = await run_remote_function(
 				event,
 				state,
 				false,
-				args,
-				(array) => Promise.all(array.map(validate)),
+				async () => (validated = await Promise.all(args.map(validate))),
 				fn
 			);
+
+			return Promise.all(
+				validated.map(async (arg, i) => {
+					try {
+						return { type: 'result', data: get_result(arg, i) };
+					} catch (error) {
+						return {
+							type: 'error',
+							error: await handle_error_and_jsonify(event, state, options, error),
+							status:
+								error instanceof HttpError || error instanceof SvelteKitError ? error.status : 500
+						};
+					}
+				})
+			);
 		}
 	};
 
@@ -190,18 +209,20 @@ function batch(validate_or_fn, maybe_fn) {
 					batching = { args: [], resolvers: [] };
 
 					try {
+						/** @type {any[]} */
+						let validated = [];
+
 						const get_result = await run_remote_function(
 							event,
 							state,
 							false,
-							batched.args,
-							(array) => Promise.all(array.map(validate)),
+							async () => (validated = await Promise.all(batched.args.map(validate))),
 							fn
 						);
 
 						for (let i = 0; i < batched.resolvers.length; i++) {
 							try {
-								batched.resolvers[i].resolve(get_result(batched.args[i], i));
+								batched.resolvers[i].resolve(get_result(validated[i], i));
 							} catch (error) {
 								batched.resolvers[i].reject(error);
 							}

packages/kit/src/runtime/app/server/remote/shared.js

@@ -97,11 +97,10 @@ export function parse_remote_response(data, transport) {
  * @param {RequestEvent} event
  * @param {RequestState} state
  * @param {boolean} allow_cookies
- * @param {any} arg
- * @param {(arg: any) => any} validate
+ * @param {() => any} get_input
  * @param {(arg?: any) => T} fn
  */
-export async function run_remote_function(event, state, allow_cookies, arg, validate, fn) {
+export async function run_remote_function(event, state, allow_cookies, get_input, fn) {
 	/** @type {RequestStore} */
 	const store = {
 		event: {
@@ -142,8 +141,8 @@ export async function run_remote_function(event, state, allow_cookies, arg, vali
 	};
 
 	// In two parts, each with_event, so that runtimes without async local storage can still get the event at the start of the function
-	const validated = await with_request_store(store, () => validate(arg));
-	return with_request_store(store, () => fn(validated));
+	const input = await with_request_store(store, get_input);
+	return with_request_store(store, () => fn(input));
 }
 
 /**

packages/kit/src/runtime/server/remote.js

@@ -73,23 +73,12 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 			/** @type {{ payloads: string[] }} */
 			const { payloads } = await event.request.json();
 
-			const args = payloads.map((payload) => parse_remote_arg(payload, transport));
-			const get_result = await with_request_store({ event, state }, () => info.run(args));
-			const results = await Promise.all(
-				args.map(async (arg, i) => {
-					try {
-						return { type: 'result', data: get_result(arg, i) };
-					} catch (error) {
-						return {
-							type: 'error',
-							error: await handle_error_and_jsonify(event, state, options, error),
-							status:
-								error instanceof HttpError || error instanceof SvelteKitError ? error.status : 500
-						};
-					}
-				})
+			const args = await Promise.all(
+				payloads.map((payload) => parse_remote_arg(payload, transport))
 			);
 
+			const results = await with_request_store({ event, state }, () => info.run(args, options));
+
 			return json(
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',

packages/kit/src/types/internal.d.ts

@@ -570,8 +570,8 @@ export type RemoteInfo =
 			type: 'query_batch';
 			id: string;
 			name: string;
-			/** Direct access to the function without batching etc logic, for remote functions called from the client */
-			run: (args: any[]) => Promise<(arg: any, idx: number) => any>;
+			/** Direct access to the function, for remote functions called from the client */
+			run: (args: any[], options: SSROptions) => Promise<any[]>;
 	  }
 	| {
 			type: 'form';

packages/kit/test/apps/async/src/routes/remote/batch-validation/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { reverse } from './batch.remote.js';
+
+	let phrase = $state('ecrof eht esu');
+	const words = $derived(phrase.split(' ').reverse());
+</script>
+
+<div id="phrase">
+	{#each words as word, i}
+		{await reverse(word)}{i === words.length - 1 ? '' : ' '}
+	{/each}
+</div>
+<button onclick={() => (phrase = 'rehtaf ruoy ma i')}>get dramatic</button>

packages/kit/test/apps/async/src/routes/remote/batch-validation/batch.remote.js

@@ -0,0 +1,12 @@
+import { query } from '$app/server';
+import * as v from 'valibot';
+
+export const reverse = query.batch(
+	v.pipe(
+		v.string(),
+		v.transform((val) => val.split('').reverse().join(''))
+	),
+	() => {
+		return (x) => x;
+	}
+);

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

@@ -301,6 +301,14 @@ test.describe('remote function mutations', () => {
 		expect(request_count).toBe(1); // only the command request
 	});
 
+	test('query.batch resolver function always receives validated arguments', async ({ page }) => {
+		await page.goto('/remote/batch-validation');
+
+		await expect(page.locator('#phrase')).toHaveText('use the force');
+		await page.locator('button').click();
+		await expect(page.locator('#phrase')).toHaveText('i am your father');
+	});
+
 	// TODO ditto
 	test('query works with transport', async ({ page }) => {
 		await page.goto('/remote/transport');