Preventing waterfalls

Everything is working, but there’s a problem: waterfalls.

If we navigate to a detail page and back again, we can see multiple getFiles calls in the network tab. Running locally, that’s fine, but in production it becomes a problem.

We need to get all the data in a single request. Happily, we can do that:

export const getFiles = query(v.string(), async (parent) => {
	const user = await requireUser();

	const data = await db
		.select()
		.from(file)
		.where(and(eq(file.user_id, user.id), eq(file.parent, parent), eq(file.status, 'ready')));

+	for (const file of data) {
+		if (file.type === 'application/x-directory') {
+			getFiles(file.id).refresh();
+		}
+	}

	return data;
});

This causes SvelteKit to call getFiles recursively until it has all the data it needs, then it sends it back in one go.