Handle large queries

Author: coyotte508

src/api/servers.remote.ts

@@ -207,8 +207,8 @@ export const updateMany = command(
 	},
 );
 
-// Count documents matching a filter
-export const countDocuments = query(
+// Count documents matching a filter - uses `command` to avoid URL length limits
+export const countDocuments = command(
 	z.object({
 		server: z.string(),
 		database: z.string(),
@@ -462,8 +462,8 @@ export const retryConnection = command(z.string(), async (serverId) => {
 	return { ok: true };
 });
 
-// Load documents from a collection
-export const loadDocuments = query(
+// Load documents from a collection - uses `command` to avoid URL length limits
+export const loadDocuments = command(
 	z.object({
 		server: z.string(),
 		database: z.string(),

src/lib/components/SearchBox.svelte

@@ -12,12 +12,17 @@
 	import { formatNumber } from "$lib/utils/filters";
 	import { tick } from "svelte";
 
+	// Threshold for URL length before switching to remote function call - see https://stackoverflow.com/questions/32763165/node-js-http-get-url-length-limitation
+	const URL_LENGTH_THRESHOLD = 20_000;
+
 	interface Props {
 		params: SearchParams;
 		editMode?: boolean;
 		readonly: boolean;
 		explainLoading?: boolean;
 		onexplain?: () => void;
+		/** Callback for when URL would be too long - called with params instead of navigating */
+		onsearch?: (params: SearchParams) => void;
 		server?: string;
 		database?: string;
 		collection?: string;
@@ -29,6 +34,7 @@
 		readonly = $bindable(false),
 		explainLoading = false,
 		onexplain,
+		onsearch,
 		server,
 		database,
 		collection,
@@ -128,6 +134,18 @@
 
 		const formData = new FormData(form);
 
+		const queryString = [...formData.entries()]
+			.map((e) => encodeURIComponent(e[0]) + "=" + encodeURIComponent(e[1] as string))
+			.join("&");
+
+		const fullUrl = page.url.pathname + "?" + queryString;
+
+		// If URL is too long and we have a callback, use remote function instead
+		if (fullUrl.length > URL_LENGTH_THRESHOLD && onsearch) {
+			onsearch(params);
+			return;
+		}
+
 		await goto(
 			resolve(
 				(page.url.pathname +

src/routes/servers/[server]/databases/[database]/collections/[collection]/documents/+page.svelte

@@ -445,6 +445,37 @@
 			explainLoading = false;
 		}
 	}
+
+	function handleSearch(searchParams: SearchParams) {
+		// Ensure field is always a string (server expects it)
+		const normalizedParams = { ...searchParams, field: searchParams.field ?? "" };
+
+		// Update local state
+		data.params = normalizedParams;
+		params = normalizedParams;
+
+		// Load documents via remote function (avoids URL length limits)
+		dataPromise = loadDocuments({
+			server: data.server,
+			database: data.database,
+			collection: data.collection,
+			query: normalizedParams.query,
+			sort: normalizedParams.sort,
+			project: normalizedParams.project,
+			skip: normalizedParams.skip,
+			limit: normalizedParams.limit,
+			mode: normalizedParams.mode,
+			field: normalizedParams.field,
+		});
+
+		// Also update the count
+		data.count = countDocuments({
+			server: data.server,
+			database: data.database,
+			collection: data.collection,
+			filter: normalizedParams.query,
+		});
+	}
 </script>
 
 {#snippet previousButton(url: string, onClick: (e: MouseEvent) => void)}
@@ -499,6 +530,7 @@
 	readonly={data.readOnly}
 	{explainLoading}
 	onexplain={handleExplain}
+	onsearch={handleSearch}
 	server={data.server}
 	database={data.database}
 	collection={data.collection}