diff --git a/packages/discovery/src/builders.ts b/packages/discovery/src/builders.ts
index 3dfe182..95efc96 100644
--- a/packages/discovery/src/builders.ts
+++ b/packages/discovery/src/builders.ts
@@ -137,6 +137,19 @@ export function anonFunct(props: {
 	});
 }
 
+export function wrapExprInFunct(expr: Expression) {
+	return paren({
+		type: "ArrowFunctionExpression",
+		params: [],
+		body: expr,
+		expression: true,
+		async: false,
+		id: null,
+		generator: false,
+		...defaultSpan,
+	});
+}
+
 export function throwStmt(toThrow: Expression): ThrowStatement {
 	return {
 		type: "ThrowStatement",
diff --git a/packages/discovery/src/transpile/api.ts b/packages/discovery/src/transpile/api.ts
index 3f2ff69..56bcba4 100644
--- a/packages/discovery/src/transpile/api.ts
+++ b/packages/discovery/src/transpile/api.ts
@@ -1,6 +1,6 @@
 import { unwrap } from "@vortexjs/common";
 import type { CallExpression, Expression } from "oxc-parser";
-import { anonFunct, createObject, defaultSpan, exportNode, identifier, literal } from "../builders";
+import { anonFunct, createObject, defaultSpan, exportNode, identifier, literal, wrapExprInFunct } from "../builders";
 import {
     type CompilerState,
     getObjectKeys,
@@ -56,12 +56,10 @@ export function handleAPIFunction(
 
     if (state.target === "server") {
         const implExportId = exportNode(state, impl);
-        props.impl = identifier(implExportId);
+        props.impl = wrapExprInFunct(identifier(implExportId));
 
         const schemaExportId = exportNode(state, schema);
 
-        props.schema = identifier(schemaExportId);
-
         state.clientEligible = false;
         state.discoveries.push({
             type: "api",
diff --git a/packages/example-wormhole/src/features/home/index.tsx b/packages/example-wormhole/src/features/home/index.tsx
index 15f08e4..d51da56 100644
--- a/packages/example-wormhole/src/features/home/index.tsx
+++ b/packages/example-wormhole/src/features/home/index.tsx
@@ -14,6 +14,8 @@ route("/", {
             }
         })
 
+        const currentTime = time.use({});
+
         return (
             <>
                 <DOMKeyboardActions />
@@ -22,7 +24,7 @@ route("/", {
                 </h1>
                 <p>
                     This is an example app, go to the{" "}
-                    <a href="/docs/tada">docs</a>
+                    <a href="/docs/tada">docs</a>, current time is {currentTime}
                 </p>
                 <button on:click={async () => {
                     console.log(await add({
@@ -73,3 +75,10 @@ export const add = query("/api/add", {
         return a + b;
     }
 })
+
+export const time = query("/api/time", {
+    impl() {
+        return new Date().toISOString();
+    },
+    schema: v.object({})
+});
diff --git a/packages/vortex-common/src/index.ts b/packages/vortex-common/src/index.ts
index b275b3f..f2c4f41 100644
--- a/packages/vortex-common/src/index.ts
+++ b/packages/vortex-common/src/index.ts
@@ -7,6 +7,7 @@ export * from "./hash";
 export * from "./npm";
 export * as SKL from "./skl";
 export * from "./smolify";
+export * from "./time";
 export * from "./ultraglobal";
 export * from "./unreachable";
 export * from "./unwrap";
diff --git a/packages/vortex-common/src/time.ts b/packages/vortex-common/src/time.ts
new file mode 100644
index 0000000..de27729
--- /dev/null
+++ b/packages/vortex-common/src/time.ts
@@ -0,0 +1,42 @@
+const timeUnits = {
+	s: 1000,
+	ms: 1,
+	m: 60 * 1000,
+	h: 60 * 60 * 1000,
+	d: 24 * 60 * 60 * 1000,
+	w: 7 * 24 * 60 * 60 * 1000,
+	y: 365 * 24 * 60 * 60 * 1000,
+} as const;
+
+type TimeUnit = keyof typeof timeUnits;
+
+export type TimeSpec = `${number}${TimeUnit}`;
+
+export function time(time: TimeSpec): { ms: number } {
+	let numberPortion = "";
+	let unitPortion = "";
+
+	for (const char of time) {
+		if (char >= "0" && char <= "9") {
+			if (unitPortion.length > 0) {
+				throw new Error(`Invalid time spec: ${time}`);
+			}
+			numberPortion += char;
+		} else {
+			unitPortion += char;
+		}
+	}
+
+	if (numberPortion.length === 0 || unitPortion.length === 0) {
+		throw new Error(`Invalid time spec: ${time}`);
+	}
+
+	const numberValue = Number.parseInt(numberPortion, 10);
+	const unitValue = timeUnits[unitPortion as TimeUnit];
+
+	if (Number.isNaN(numberValue) || unitValue === undefined) {
+		throw new Error(`Invalid time spec: ${time}`);
+	}
+
+	return { ms: numberValue * unitValue };
+}
diff --git a/packages/vortex-core/src/context.ts b/packages/vortex-core/src/context.ts
index 233e9a9..3dd2256 100644
--- a/packages/vortex-core/src/context.ts
+++ b/packages/vortex-core/src/context.ts
@@ -1,5 +1,7 @@
 import { unwrap } from "@vortexjs/common";
 import type { JSXNode } from "./jsx/jsx-common";
+import type { Lifetime } from "./lifetime";
+import { QueryDataEngine } from "./query";
 import { clearImmediate, setImmediate } from "./setImmediate.polyfill";
 import { type Signal, type SignalOrValue, toSignal } from "./signal";
 
@@ -97,10 +99,19 @@ export class StreamingContext {
 export class ContextScope {
 	contexts: Record<string, Signal<any>> = {};
 	streaming: StreamingContext = new StreamingContext();
+	query: QueryDataEngine;
+	lt: Lifetime;
+
+	constructor(lt: Lifetime) {
+		this.query = new QueryDataEngine({ streaming: this.streaming, lt });
+		this.lt = lt;
+	}
 
 	fork() {
-		const newScope = new ContextScope();
+		const newScope = new ContextScope(this.lt);
 		newScope.contexts = { ...this.contexts };
+		newScope.streaming = this.streaming;
+		newScope.query = this.query;
 		return newScope;
 	}
 
diff --git a/packages/vortex-core/src/index.ts b/packages/vortex-core/src/index.ts
index dbbcc98..848dc9a 100644
--- a/packages/vortex-core/src/index.ts
+++ b/packages/vortex-core/src/index.ts
@@ -2,6 +2,7 @@ export * from "./context";
 export * from "./intrinsic";
 export * from "./jsx/jsx-common";
 export * from "./lifetime";
+export * from "./query";
 export * from "./render";
 export * from "./setImmediate.polyfill";
 export * from "./signal";
diff --git a/packages/vortex-core/src/query/data-engine.ts b/packages/vortex-core/src/query/data-engine.ts
new file mode 100644
index 0000000..09baa78
--- /dev/null
+++ b/packages/vortex-core/src/query/data-engine.ts
@@ -0,0 +1,137 @@
+import { getImmediateValue, useState, type Store } from "~/signal";
+import type { QuerySchema } from "./schema";
+import { time } from "@vortexjs/common";
+import type { StreamingContext } from "~/context";
+import type { Lifetime } from "~/lifetime";
+
+export class QueryObservation<Args, Result> {
+	maxAge: number;
+	query: Query<Args, Result>;
+
+	constructor(
+		props: {
+			query: Query<Args, Result>;
+			maxAge?: number;
+		}
+	) {
+		this.query = props.query;
+		this.maxAge = props.maxAge ?? time("5m").ms;
+	}
+}
+
+export type QuerySupplement = Record<string, any>;
+
+export class Query<Args, Result> {
+	schema: QuerySchema<Args, Result>;
+	args: Args;
+	data: Store<Result | undefined> = useState(undefined);
+	isLoading: boolean;
+	updatedAt: number;
+	dataEngine: QueryDataEngine;
+
+	constructor(props: { schema: QuerySchema<Args, Result>; args: Args, dataEngine: QueryDataEngine }) {
+		this.schema = props.schema;
+		this.args = props.args;
+		this.isLoading = false;
+		this.updatedAt = 0;
+		this.dataEngine = props.dataEngine;
+	}
+
+	async update() {
+		if (this.isLoading) return;
+
+		using _data = this.dataEngine.streaming.markLoading();
+
+		this.isLoading = true;
+
+		try {
+			const result = await this.schema.impl(this.args);
+			this.data.set(result);
+			this.updatedAt = Date.now();
+			console.log(`[${this.dataEngine.id}]: Query updated:`, this.schema.getKey(this.args), result);
+		} catch (e) {
+			console.error("Error fetching query:", e);
+		} finally {
+			this.isLoading = false;
+		}
+	}
+}
+
+export class QueryDataEngine {
+	observations: QueryObservation<any, any>[] = [];
+	queries = new Map<string, Query<any, any>>();
+	streaming: StreamingContext;
+	hydrationSupplement: QuerySupplement = {};
+	id = crypto.randomUUID();
+
+	constructor({ streaming, lt }: {
+		streaming: StreamingContext,
+		lt: Lifetime
+	}) {
+		this.streaming = streaming;
+		const int = setInterval(() => this.tick(), 1000);
+		lt.onClosed(() => clearInterval(int));
+	}
+
+	getSupplement(): QuerySupplement {
+		console.log(`[${this.id}]: I have ${this.queries.size} queries`);
+		const supplement: QuerySupplement = {};
+		for (const [key, query] of this.queries) {
+			const data = getImmediateValue(query.data);
+			console.log(`[${this.id}]: Gathering supplement data for ${key}`, data);
+			if (data === undefined) continue;
+			supplement[key] = data;
+		}
+		return supplement;
+	}
+
+	tick() {
+		const now = Date.now();
+
+		for (const obs of this.observations) {
+			if (now - obs.query.updatedAt > obs.maxAge) {
+				obs.query.update();
+			}
+		}
+	}
+
+	createObservation<Args, Result>(
+		props: {
+			maxAge?: number;
+			schema: QuerySchema<Args, Result>;
+			args: Args;
+			lt: Lifetime;
+		}
+	): QueryObservation<Args, Result> {
+		const key = props.schema.getKey(props.args);
+
+		// Create query if it doesn't exist
+		let query = this.queries.get(key);
+
+		if (!query) {
+			query = new Query<Args, Result>({ schema: props.schema, args: props.args, dataEngine: this });
+			this.queries.set(key, query);
+			if (key in this.hydrationSupplement) {
+				query.data.set(this.hydrationSupplement[key]);
+				query.updatedAt = Date.now();
+			} else {
+				query.update();
+			}
+		}
+
+		const observation = new QueryObservation<Args, Result>({
+			query,
+			maxAge: props.maxAge
+		});
+		this.observations.push(observation);
+
+		props.lt.onClosed(() => {
+			const index = this.observations.indexOf(observation);
+			if (index !== -1) {
+				this.observations.splice(index, 1);
+			}
+		});
+
+		return observation;
+	}
+}
diff --git a/packages/vortex-core/src/query/hook.ts b/packages/vortex-core/src/query/hook.ts
new file mode 100644
index 0000000..b11172e
--- /dev/null
+++ b/packages/vortex-core/src/query/hook.ts
@@ -0,0 +1,24 @@
+import { useContextScope } from "~/context";
+import type { QuerySchema } from "./schema";
+import { useHookLifetime } from "~/lifetime";
+import type { Signal } from "~/signal";
+
+export interface QueryProps { maxAge?: number }
+
+export function useQuery<Args, Result>(
+    schema: QuerySchema<Args, Result>,
+    args: Args,
+    props?: QueryProps,
+): Signal<Result | undefined> {
+    const contextScope = useContextScope();
+    const lt = useHookLifetime();
+
+    const observation = contextScope.query.createObservation({
+        schema,
+        args,
+        lt,
+        maxAge: props?.maxAge,
+    });
+
+    return observation.query.data;
+}
diff --git a/packages/vortex-core/src/query/index.ts b/packages/vortex-core/src/query/index.ts
new file mode 100644
index 0000000..6d67f88
--- /dev/null
+++ b/packages/vortex-core/src/query/index.ts
@@ -0,0 +1,3 @@
+export * from "./data-engine";
+export * from "./hook";
+export * from "./schema";
diff --git a/packages/vortex-core/src/query/schema.ts b/packages/vortex-core/src/query/schema.ts
new file mode 100644
index 0000000..dbaa7fb
--- /dev/null
+++ b/packages/vortex-core/src/query/schema.ts
@@ -0,0 +1,22 @@
+import { hash } from "@vortexjs/common";
+
+export interface QuerySchema<Args, Result> {
+	id: string;
+	impl(args: Args): Promise<Result> | Result;
+	getKey(args: Args): string;
+}
+
+export function querySchema<Args, Result>({ id, impl }: {
+	id: string;
+	impl(args: Args): Promise<Result> | Result;
+}): QuerySchema<Args, Result> {
+	return {
+		id,
+		impl,
+		getKey(args) {
+			const base = `${id}::${JSON.stringify(args)}`;
+			const short = hash(base).toString(36).slice(0, 5);
+			return short;
+		}
+	};
+}
diff --git a/packages/vortex-core/src/render/index.tsx b/packages/vortex-core/src/render/index.tsx
index 56e248f..eaede6a 100644
--- a/packages/vortex-core/src/render/index.tsx
+++ b/packages/vortex-core/src/render/index.tsx
@@ -50,7 +50,7 @@ function internalRender<RendererNode, HydrationContext>({ renderer, root, compon
         node: <ActionProvider>{component}</ActionProvider>,
         hydration: renderer.getHydrationContext(root),
         lt,
-        context: context ?? ContextScope.current ?? new ContextScope(),
+        context: context ?? ContextScope.current ?? new ContextScope(lt),
     });
 
     const portal = new FLPortal(root, renderer);
diff --git a/packages/wormhole/src/build/adapters/dev.ts b/packages/wormhole/src/build/adapters/dev.ts
index 217df92..6e29ace 100644
--- a/packages/wormhole/src/build/adapters/dev.ts
+++ b/packages/wormhole/src/build/adapters/dev.ts
@@ -84,8 +84,13 @@ export function DevAdapter(): DevAdapter {
 				root,
 				pathname: props.pathname,
 				context: props.context,
-				lifetime: props.lifetime ?? new Lifetime(),
-			});`;
+				lifetime: props.lifetime ?? new Lifetime(),`;
+
+            if (location === "client") {
+                codegenSource += `supplement: props.supplement,`;
+            }
+
+            codegenSource += `});`;
 
             codegenSource += `}`;
 
diff --git a/packages/wormhole/src/build/adapters/vercel.ts b/packages/wormhole/src/build/adapters/vercel.ts
index 1f7e635..c344e3f 100644
--- a/packages/wormhole/src/build/adapters/vercel.ts
+++ b/packages/wormhole/src/build/adapters/vercel.ts
@@ -7,76 +7,76 @@ import { mkdir, rmdir } from "node:fs/promises";
 import { printRoutePath, type RoutePath } from "../router";
 
 export interface VercelAdapterResult {
-    outputDir: string;
-    staticDir: string;
-    functionsDir: string;
-    configFile: string;
+	outputDir: string;
+	staticDir: string;
+	functionsDir: string;
+	configFile: string;
 }
 
 export interface VercelAdapter extends BuildAdapter<VercelAdapterResult> {
-    buildClientBundle(build: Build): Promise<string>;
-    buildCSS(build: Build): Promise<string>;
-    buildRouteFunction(build: Build, route: BuildRoute): Promise<string>;
+	buildClientBundle(build: Build): Promise<string>;
+	buildCSS(build: Build): Promise<string>;
+	buildRouteFunction(build: Build, route: BuildRoute): Promise<string>;
 }
 
 export function getRouteId(matcher: RoutePath) {
-    return printRoutePath(matcher).replaceAll(/\\|\//gi, "-").replaceAll(" ", "-") || 'index';
+	return printRoutePath(matcher).replaceAll(/\\|\//gi, "-").replaceAll(" ", "-") || 'index';
 }
 
 export function VercelAdapter(): VercelAdapter {
-    return {
-        async buildClientBundle(build: Build) {
-            using _task = addTask({
-                name: "Building client bundle for Vercel"
-            });
+	return {
+		async buildClientBundle(build: Build) {
+			using _task = addTask({
+				name: "Building client bundle for Vercel"
+			});
 
-            let codegenSource = "";
+			let codegenSource = "";
 
-            codegenSource += `import { INTERNAL_entrypoint } from "@vortexjs/wormhole";`;
-            codegenSource += `import { Lifetime } from "@vortexjs/core";`;
-            codegenSource += `import { html } from "@vortexjs/dom";`;
+			codegenSource += `import { INTERNAL_entrypoint } from "@vortexjs/wormhole";`;
+			codegenSource += `import { Lifetime } from "@vortexjs/core";`;
+			codegenSource += `import { html } from "@vortexjs/dom";`;
 
-            const imports: Export[] = [];
+			const imports: Export[] = [];
 
-            function getExportIndex(exp: Export): number {
-                const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
-                if (index === -1) {
-                    imports.push(exp);
-                    return imports.length - 1;
-                }
-                return index;
-            }
+			function getExportIndex(exp: Export): number {
+				const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
+				if (index === -1) {
+					imports.push(exp);
+					return imports.length - 1;
+				}
+				return index;
+			}
 
-            const entrypointProps: EntrypointProps = {
-                routes: build.routes.filter(x => x.type === "route").map(x => ({
-                    matcher: x.matcher,
-                    frames: x.frames.map((frame) => ({
-                        index: getExportIndex(frame),
-                    })),
-                    is404: x.is404,
-                }))
-            };
+			const entrypointProps: EntrypointProps = {
+				routes: build.routes.filter(x => x.type === "route").map(x => ({
+					matcher: x.matcher,
+					frames: x.frames.map((frame) => ({
+						index: getExportIndex(frame),
+					})),
+					is404: x.is404,
+				}))
+			};
 
-            codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
+			codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
 
-            codegenSource += `function main(props) {`;
+			codegenSource += `function main(props) {`;
 
-            codegenSource += 'const loaders = [';
+			codegenSource += 'const loaders = [';
 
-            for (const exp of imports) {
-                const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
+			for (const exp of imports) {
+				const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
 
-                const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
+				const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
 
-                codegenSource += `(async () => (await import(${JSON.stringify(path)}))[${JSON.stringify(exp.name)}]),`;
-            }
+				codegenSource += `(async () => (await import(${JSON.stringify(path)}))[${JSON.stringify(exp.name)}]),`;
+			}
 
-            codegenSource += '];';
+			codegenSource += '];';
 
-            codegenSource += `const renderer = html();`;
-            codegenSource += `const root = document.documentElement;`;
+			codegenSource += `const renderer = html();`;
+			codegenSource += `const root = document.documentElement;`;
 
-            codegenSource += `return INTERNAL_entrypoint({
+			codegenSource += `return INTERNAL_entrypoint({
 				props: entrypointProps,
 				loaders,
 				renderer,
@@ -84,157 +84,158 @@ export function VercelAdapter(): VercelAdapter {
 				pathname: props.pathname,
 				context: props.context,
 				lifetime: props.lifetime ?? new Lifetime(),
+				supplement: props.supplement
 			});`;
 
-            codegenSource += `}`;
+			codegenSource += `}`;
 
-            codegenSource += `window.wormhole = {};`;
-            codegenSource += `window.wormhole.hydrate = main;`;
-
-            const path = await build.writeCodegenned("entrypoint-client", codegenSource);
-
-            const bundled = await build.bundle({
-                target: "client",
-                inputPaths: {
-                    app: path,
-                },
-                outdir: join(build.project.projectDir, ".vercel", "output", "static"),
-                dev: false
-            });
-
-            return bundled.outputs.app;
-        },
-
-        async buildCSS(build: Build) {
-            using _task = addTask({
-                name: "Building CSS for Vercel"
-            });
-
-            let codegenCSS = "";
-
-            const appCSSPath = join(build.project.projectDir, "src", "app.css");
-
-            if (await Bun.file(appCSSPath).exists()) {
-                codegenCSS += `@import "${appCSSPath}";`;
-            }
-
-            const cssPath = await build.writeCodegenned("styles", codegenCSS, "css");
-
-            const bundled = await build.bundle({
-                target: "client",
-                inputPaths: {
-                    app: cssPath,
-                },
-                outdir: join(build.project.projectDir, ".vercel", "output", "static"),
-                dev: false
-            });
-
-            return bundled.outputs.app;
-        },
-
-        async buildRouteFunction(build: Build, route: BuildRoute) {
-            using _task = addTask({
-                name: `Building function for route: ${printRoutePath(route.matcher)}`
-            });
-
-            let codegenSource = "";
-
-            if (route.type === "api") {
-                // API route function
-                codegenSource += `import {INTERNAL_tryHandleAPI} from "@vortexjs/wormhole";`;
-
-                codegenSource += `import { ${JSON.stringify(route.schema.name)} as schema } from ${JSON.stringify(route.schema.file)};`;
-                codegenSource += `import { ${JSON.stringify(route.impl.name)} as impl } from ${JSON.stringify(route.impl.file)};`;
-                codegenSource += `import { SKL } from "@vortexjs/common";`;
-
-                codegenSource += `export default async function handler(request) {`;
-                codegenSource += `const text = `;
-                if (route.method === "GET") {
-                    codegenSource += `new URL(request.url).searchParams.get("props")`;
-                } else {
-                    codegenSource += `await request.text()`;
-                }
-                codegenSource += `;`;
-
-                codegenSource += `if (!text) { return new Response("Missing body", { status: 400 }); }`;
-
-                codegenSource += `let body;`;
-                codegenSource += `try { body = SKL.parse(text); } catch (e) { return new Response("Invalid SKL", { status: 400 }); }`;
-
-                // check against standard schema
-                codegenSource += `const parsed = await schema["~standard"].validate(body);`;
-
-                codegenSource += `if ("issues" in parsed && parsed.issues != null && parsed.issues.length > 0) {`;
-                codegenSource += `return new Response("Request did not match schema", { status: 400 })`;
-                codegenSource += `}`;
-
-                codegenSource += `try {`;
-                codegenSource += `const result = await impl(parsed.value);`;
-                codegenSource += `return new Response(SKL.stringify(result), { status: 200, headers: { "Content-Type": "application/skl" } });`;
-                codegenSource += `} catch (e) {`;
-                codegenSource += `console.error(e);`;
-                codegenSource += `return new Response("Internal Server Error", { status: 500 });`;
-                codegenSource += `}`;
-
-                codegenSource += `}`;
-            } else {
-                // Page route function
-                codegenSource += `import { INTERNAL_entrypoint, INTERNAL_createStreamUtility } from "@vortexjs/wormhole";`;
-                codegenSource += `import { Lifetime, ContextScope } from "@vortexjs/core";`;
-                codegenSource += `import { createHTMLRoot, ssr, printHTML, diffInto } from "@vortexjs/ssr";`;
-
-                const imports: Export[] = [];
-
-                function getExportIndex(exp: Export): number {
-                    const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
-                    if (index === -1) {
-                        imports.push(exp);
-                        return imports.length - 1;
-                    }
-                    return index;
-                }
-
-                const entrypointProps: EntrypointProps = {
-                    routes: [{
-                        matcher: route.matcher,
-                        frames: route.frames.map((frame) => ({
-                            index: getExportIndex(frame),
-                        })),
-                        is404: route.is404,
-                    }]
-                };
-
-                codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
-
-                let idx = 0;
-                for (const exp of imports) {
-                    const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
-
-                    const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
-
-                    codegenSource += `import {${JSON.stringify(exp.name)} as imp${idx}} from ${JSON.stringify(path)};`;
-                    idx++;
-                }
-
-                codegenSource += 'const loaders = [';
-
-                idx = 0;
-                for (const exp of imports) {
-                    codegenSource += `(()=>imp${idx}),`;
-                    idx++;
-                }
-
-                codegenSource += '];';
-
-                codegenSource += `export default async function handler(request) {`;
-                codegenSource += `const url = new URL(request.url);`;
-                codegenSource += `const pathname = url.pathname;`;
-
-                codegenSource += `const renderer = ssr();`;
-                codegenSource += `const root = createHTMLRoot();`;
-                codegenSource += `const lifetime = new Lifetime();`;
-                codegenSource += `const context = new ContextScope();`;
-                codegenSource += `await INTERNAL_entrypoint({
+			codegenSource += `window.wormhole = {};`;
+			codegenSource += `window.wormhole.hydrate = main;`;
+
+			const path = await build.writeCodegenned("entrypoint-client", codegenSource);
+
+			const bundled = await build.bundle({
+				target: "client",
+				inputPaths: {
+					app: path,
+				},
+				outdir: join(build.project.projectDir, ".vercel", "output", "static"),
+				dev: false
+			});
+
+			return bundled.outputs.app;
+		},
+
+		async buildCSS(build: Build) {
+			using _task = addTask({
+				name: "Building CSS for Vercel"
+			});
+
+			let codegenCSS = "";
+
+			const appCSSPath = join(build.project.projectDir, "src", "app.css");
+
+			if (await Bun.file(appCSSPath).exists()) {
+				codegenCSS += `@import "${appCSSPath}";`;
+			}
+
+			const cssPath = await build.writeCodegenned("styles", codegenCSS, "css");
+
+			const bundled = await build.bundle({
+				target: "client",
+				inputPaths: {
+					app: cssPath,
+				},
+				outdir: join(build.project.projectDir, ".vercel", "output", "static"),
+				dev: false
+			});
+
+			return bundled.outputs.app;
+		},
+
+		async buildRouteFunction(build: Build, route: BuildRoute) {
+			using _task = addTask({
+				name: `Building function for route: ${printRoutePath(route.matcher)}`
+			});
+
+			let codegenSource = "";
+
+			if (route.type === "api") {
+				// API route function
+				codegenSource += `import {INTERNAL_tryHandleAPI} from "@vortexjs/wormhole";`;
+
+				codegenSource += `import { ${JSON.stringify(route.schema.name)} as schema } from ${JSON.stringify(route.schema.file)};`;
+				codegenSource += `import { ${JSON.stringify(route.impl.name)} as impl } from ${JSON.stringify(route.impl.file)};`;
+				codegenSource += `import { SKL } from "@vortexjs/common";`;
+
+				codegenSource += `export default async function handler(request) {`;
+				codegenSource += `const text = `;
+				if (route.method === "GET") {
+					codegenSource += `new URL(request.url).searchParams.get("props")`;
+				} else {
+					codegenSource += `await request.text()`;
+				}
+				codegenSource += `;`;
+
+				codegenSource += `if (!text) { return new Response("Missing body", { status: 400 }); }`;
+
+				codegenSource += `let body;`;
+				codegenSource += `try { body = SKL.parse(text); } catch (e) { return new Response("Invalid SKL", { status: 400 }); }`;
+
+				// check against standard schema
+				codegenSource += `const parsed = await schema["~standard"].validate(body);`;
+
+				codegenSource += `if ("issues" in parsed && parsed.issues != null && parsed.issues.length > 0) {`;
+				codegenSource += `return new Response("Request did not match schema", { status: 400 })`;
+				codegenSource += `}`;
+
+				codegenSource += `try {`;
+				codegenSource += `const result = await impl(parsed.value);`;
+				codegenSource += `return new Response(SKL.stringify(result), { status: 200, headers: { "Content-Type": "application/skl" } });`;
+				codegenSource += `} catch (e) {`;
+				codegenSource += `console.error(e);`;
+				codegenSource += `return new Response("Internal Server Error", { status: 500 });`;
+				codegenSource += `}`;
+
+				codegenSource += `}`;
+			} else {
+				// Page route function
+				codegenSource += `import { INTERNAL_entrypoint, INTERNAL_createStreamUtility } from "@vortexjs/wormhole";`;
+				codegenSource += `import { Lifetime, ContextScope } from "@vortexjs/core";`;
+				codegenSource += `import { createHTMLRoot, ssr, printHTML, diffInto } from "@vortexjs/ssr";`;
+
+				const imports: Export[] = [];
+
+				function getExportIndex(exp: Export): number {
+					const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
+					if (index === -1) {
+						imports.push(exp);
+						return imports.length - 1;
+					}
+					return index;
+				}
+
+				const entrypointProps: EntrypointProps = {
+					routes: [{
+						matcher: route.matcher,
+						frames: route.frames.map((frame) => ({
+							index: getExportIndex(frame),
+						})),
+						is404: route.is404,
+					}]
+				};
+
+				codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
+
+				let idx = 0;
+				for (const exp of imports) {
+					const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
+
+					const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
+
+					codegenSource += `import {${JSON.stringify(exp.name)} as imp${idx}} from ${JSON.stringify(path)};`;
+					idx++;
+				}
+
+				codegenSource += 'const loaders = [';
+
+				idx = 0;
+				for (const exp of imports) {
+					codegenSource += `(()=>imp${idx}),`;
+					idx++;
+				}
+
+				codegenSource += '];';
+
+				codegenSource += `export default async function handler(request) {`;
+				codegenSource += `const url = new URL(request.url);`;
+				codegenSource += `const pathname = url.pathname;`;
+
+				codegenSource += `const renderer = ssr();`;
+				codegenSource += `const root = createHTMLRoot();`;
+				codegenSource += `const lifetime = new Lifetime();`;
+				codegenSource += `const context = new ContextScope(lifetime);`;
+				codegenSource += `await INTERNAL_entrypoint({
                     props: entrypointProps,
                     loaders,
                     renderer,
@@ -243,103 +244,103 @@ export function VercelAdapter(): VercelAdapter {
                     context,
                     lifetime,
                 });`;
-                codegenSource += `const streamutil = INTERNAL_createStreamUtility();`;
-                codegenSource += `const html = printHTML(root);`;
-                codegenSource += `async function load() {`;
-                codegenSource += `streamutil.write(html);`;
-                codegenSource += `let currentSnapshot = structuredClone(root);`;
-                codegenSource += `context.streaming.updated();`;
-                codegenSource += `context.streaming.onUpdate(() => {`;
-                codegenSource += `const codegen = diffInto(currentSnapshot, root);`;
-                codegenSource += `const code = codegen.getCode();`;
-                codegenSource += `currentSnapshot = structuredClone(root);`;
-                codegenSource += "streamutil.write(`<script>${code}</script>`);";
-                codegenSource += `});`;
-                codegenSource += `await context.streaming.onDoneLoading;`;
-                codegenSource += "streamutil.write(`<script>window.addEventListener('load', () => {wormhole.hydrate({})});</script>`);";
-                codegenSource += `streamutil.end();`;
-                codegenSource += `lifetime.close();`;
-                codegenSource += `}`;
-                codegenSource += `load();`;
-                codegenSource += `return new Response(streamutil.readable.pipeThrough(new TextEncoderStream()), {`;
-                codegenSource += `status: 200,`;
-                codegenSource += `headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Content-Type-Options': 'nosniff', 'Transfer-Encoding': 'chunked', Connection: 'keep-alive', }`;
-                codegenSource += `});`;
-                codegenSource += `}`;
-            }
-
-            const routeId = getRouteId(route.matcher);
-            const filename = `function-${route.type}-${routeId}`;
-            const path = await build.writeCodegenned(filename, codegenSource);
-
-            const bundled = await build.bundle({
-                target: "server",
-                inputPaths: {
-                    main: path,
-                },
-                dev: false,
-                noSplitting: true
-            });
-
-            return bundled.outputs.main;
-        },
-
-        async run(build) {
-            using _task = addTask({
-                name: "Building for Vercel Build Output API"
-            });
-
-            const outputDir = join(build.project.projectDir, ".vercel", "output");
-
-            await rmdir(outputDir, { recursive: true }).catch(() => { /* ignore */ });
-
-            const staticDir = join(outputDir, "static");
-            const functionsDir = join(outputDir, "functions");
-
-            // Ensure directories exist
-            await mkdir(outputDir, { recursive: true });
-            await mkdir(staticDir, { recursive: true });
-            await mkdir(functionsDir, { recursive: true });
-
-            // Build client bundle and CSS
-            await this.buildClientBundle(build);
-            await this.buildCSS(build);
-
-            // Build individual route functions
-            const routeFunctions: string[] = [];
-            for (const route of build.routes) {
-                const functionPath = await this.buildRouteFunction(build, route);
-                routeFunctions.push(functionPath);
-
-                // Create function directory in Vercel output
-                const functionDir = join(functionsDir, `${printRoutePath(route.matcher) || "index"}.func`);
-                await mkdir(functionDir, { recursive: true });
-
-                // Copy function file
-                const functionIndexPath = join(functionDir, "index.js");
-                await Bun.write(functionIndexPath, await Bun.file(functionPath).text());
-
-                // Create .vc-config.json for each function
-                const vcConfig = {
-                    runtime: "edge",
-                    entrypoint: "index.js"
-                };
-                await Bun.write(join(functionDir, ".vc-config.json"), JSON.stringify(vcConfig, null, 2));
-            }
-
-            const config = {
-                version: 3
-            };
-
-            const configPath = join(outputDir, "config.json");
-            await Bun.write(configPath, JSON.stringify(config, null, 2));
-
-            return {
-                outputDir,
-                staticDir,
-                functionsDir,
-                configFile: configPath
-            };
-        }
-    };
+				codegenSource += `const streamutil = INTERNAL_createStreamUtility();`;
+				codegenSource += `const html = printHTML(root);`;
+				codegenSource += `async function load() {`;
+				codegenSource += `streamutil.write(html);`;
+				codegenSource += `let currentSnapshot = structuredClone(root);`;
+				codegenSource += `context.streaming.updated();`;
+				codegenSource += `context.streaming.onUpdate(() => {`;
+				codegenSource += `const codegen = diffInto(currentSnapshot, root);`;
+				codegenSource += `const code = codegen.getCode();`;
+				codegenSource += `currentSnapshot = structuredClone(root);`;
+				codegenSource += "streamutil.write(`<script>${code}</script>`);";
+				codegenSource += `});`;
+				codegenSource += `await context.streaming.onDoneLoading;`;
+				codegenSource += "streamutil.write(`<script>window.addEventListener('load', () => {wormhole.hydrate({supplement:JSON.parse(${JSON.stringify(JSON.stringify(context.query.getSupplement()))})})});</script>`);";
+				codegenSource += `streamutil.end();`;
+				codegenSource += `lifetime.close();`;
+				codegenSource += `}`;
+				codegenSource += `load();`;
+				codegenSource += `return new Response(streamutil.readable.pipeThrough(new TextEncoderStream()), {`;
+				codegenSource += `status: 200,`;
+				codegenSource += `headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Content-Type-Options': 'nosniff', 'Transfer-Encoding': 'chunked', Connection: 'keep-alive', }`;
+				codegenSource += `});`;
+				codegenSource += `}`;
+			}
+
+			const routeId = getRouteId(route.matcher);
+			const filename = `function-${route.type}-${routeId}`;
+			const path = await build.writeCodegenned(filename, codegenSource);
+
+			const bundled = await build.bundle({
+				target: "server",
+				inputPaths: {
+					main: path,
+				},
+				dev: false,
+				noSplitting: true
+			});
+
+			return bundled.outputs.main;
+		},
+
+		async run(build) {
+			using _task = addTask({
+				name: "Building for Vercel Build Output API"
+			});
+
+			const outputDir = join(build.project.projectDir, ".vercel", "output");
+
+			await rmdir(outputDir, { recursive: true }).catch(() => { /* ignore */ });
+
+			const staticDir = join(outputDir, "static");
+			const functionsDir = join(outputDir, "functions");
+
+			// Ensure directories exist
+			await mkdir(outputDir, { recursive: true });
+			await mkdir(staticDir, { recursive: true });
+			await mkdir(functionsDir, { recursive: true });
+
+			// Build client bundle and CSS
+			await this.buildClientBundle(build);
+			await this.buildCSS(build);
+
+			// Build individual route functions
+			const routeFunctions: string[] = [];
+			for (const route of build.routes) {
+				const functionPath = await this.buildRouteFunction(build, route);
+				routeFunctions.push(functionPath);
+
+				// Create function directory in Vercel output
+				const functionDir = join(functionsDir, `${printRoutePath(route.matcher) || "index"}.func`);
+				await mkdir(functionDir, { recursive: true });
+
+				// Copy function file
+				const functionIndexPath = join(functionDir, "index.js");
+				await Bun.write(functionIndexPath, await Bun.file(functionPath).text());
+
+				// Create .vc-config.json for each function
+				const vcConfig = {
+					runtime: "edge",
+					entrypoint: "index.js"
+				};
+				await Bun.write(join(functionDir, ".vc-config.json"), JSON.stringify(vcConfig, null, 2));
+			}
+
+			const config = {
+				version: 3
+			};
+
+			const configPath = join(outputDir, "config.json");
+			await Bun.write(configPath, JSON.stringify(config, null, 2));
+
+			return {
+				outputDir,
+				staticDir,
+				functionsDir,
+				configFile: configPath
+			};
+		}
+	};
 }
diff --git a/packages/wormhole/src/dev/dev-server.ts b/packages/wormhole/src/dev/dev-server.ts
index 3e93367..c31d4fa 100644
--- a/packages/wormhole/src/dev/dev-server.ts
+++ b/packages/wormhole/src/dev/dev-server.ts
@@ -9,177 +9,190 @@ import { watch } from "node:fs";
 import type { HTTPMethod } from "~/shared/http-method";
 
 export interface DevServer {
-    lifetime: Lifetime;
-    server: Bun.Server;
-    processRequest(request: Request, tags: RequestTag[]): Promise<Response>;
-    rebuild(): Promise<void>;
-    buildResult: Promise<DevAdapterResult>;
-    project: Project;
+	lifetime: Lifetime;
+	server: Bun.Server;
+	processRequest(request: Request, tags: RequestTag[]): Promise<Response>;
+	rebuild(): Promise<void>;
+	buildResult: Promise<DevAdapterResult>;
+	project: Project;
 }
 
 export function DevServer(project: Project): DevServer {
-    const server = Bun.serve({
-        port: 3141,
-        routes: {
-            "/*": async (req) => {
-                return new Response();
-            }
-        },
-        development: true
-    });
-
-    project.lt.onClosed(server.stop);
-
-    const self: DevServer = {
-        lifetime: project.lt,
-        server,
-        processRequest: DevServer_processRequest,
-        rebuild: DevServer_rebuild,
-        buildResult: new Promise(() => { }),
-        project
-    }
-
-    server.reload({
-        routes: {
-            "/*": async (req) => {
-                const tags: RequestTag[] = [];
-                const response = await self.processRequest(req, tags);
-
-                addLog({
-                    type: "request",
-                    url: new URL(req.url).pathname,
-                    method: req.method as HTTPMethod,
-                    responseCode: response.status,
-                    tags
-                })
-
-                return response;
-            }
-        }
-    });
-
-    const devServerTask = addTask({
-        name: `Development server running @ ${server.url.toString()}`
-    });
-
-    project.lt.onClosed(devServerTask[Symbol.dispose]);
-
-    self.rebuild();
-
-    // Watch sourcedir
-    const watcher = watch(join(project.projectDir, "src"), { recursive: true });
-
-    let isWaitingForRebuild = false;
-
-    watcher.on("change", async (eventType, filename) => {
-        if (isWaitingForRebuild) return;
-        isWaitingForRebuild = true;
-        await self.buildResult;
-        isWaitingForRebuild = false;
-        self.rebuild();
-    });
-
-    project.lt.onClosed(() => {
-        watcher.close();
-    });
-
-    return self;
+	const server = Bun.serve({
+		port: 3141,
+		routes: {
+			"/*": async (req) => {
+				return new Response();
+			}
+		},
+		development: true
+	});
+
+	project.lt.onClosed(server.stop);
+
+	const self: DevServer = {
+		lifetime: project.lt,
+		server,
+		processRequest: DevServer_processRequest,
+		rebuild: DevServer_rebuild,
+		buildResult: new Promise(() => { }),
+		project
+	}
+
+	server.reload({
+		routes: {
+			"/*": async (req) => {
+				try {
+					const tags: RequestTag[] = [];
+					const response = await self.processRequest(req, tags);
+
+					addLog({
+						type: "request",
+						url: new URL(req.url).pathname,
+						method: req.method as HTTPMethod,
+						responseCode: response.status,
+						tags
+					})
+
+					return response;
+				} catch (e) {
+					console.error(e);
+
+					addLog({
+						type: "request",
+						url: new URL(req.url).pathname,
+						method: req.method as HTTPMethod,
+						responseCode: 500,
+						tags: []
+					})
+
+					return new Response("Internal Server Error", { status: 500 });
+				}
+			}
+		}
+	});
+
+	const devServerTask = addTask({
+		name: `Development server running @ ${server.url.toString()}`
+	});
+
+	project.lt.onClosed(devServerTask[Symbol.dispose]);
+
+	self.rebuild();
+
+	// Watch sourcedir
+	const watcher = watch(join(project.projectDir, "src"), { recursive: true });
+
+	let isWaitingForRebuild = false;
+
+	watcher.on("change", async (eventType, filename) => {
+		if (isWaitingForRebuild) return;
+		isWaitingForRebuild = true;
+		await self.buildResult;
+		isWaitingForRebuild = false;
+		self.rebuild();
+	});
+
+	project.lt.onClosed(() => {
+		watcher.close();
+	});
+
+	return self;
 }
 
 async function DevServer_rebuild(this: DevServer): Promise<void> {
-    const build = new Build(this.project, DevAdapter());
-    this.buildResult = build.run();
-    await this.buildResult;
+	const build = new Build(this.project, DevAdapter());
+	this.buildResult = build.run();
+	await this.buildResult;
 }
 
 interface ServerEntrypoint {
-    main<RendererNode, HydrationContext>(props: {
-        renderer: Renderer<RendererNode, HydrationContext>,
-        root: RendererNode,
-        pathname: string,
-        context: ContextScope,
-        lifetime: Lifetime
-    }): void;
-    tryHandleAPI(request: Request): Promise<Response | undefined>;
-    isRoute404(pathname: string): boolean;
+	main<RendererNode, HydrationContext>(props: {
+		renderer: Renderer<RendererNode, HydrationContext>,
+		root: RendererNode,
+		pathname: string,
+		context: ContextScope,
+		lifetime: Lifetime
+	}): void;
+	tryHandleAPI(request: Request): Promise<Response | undefined>;
+	isRoute404(pathname: string): boolean;
 }
 
 async function DevServer_processRequest(this: DevServer, request: Request, tags: RequestTag[]): Promise<Response> {
-    const built = await this.buildResult;
+	const built = await this.buildResult;
 
-    const serverPath = built.serverEntry;
-    const serverEntrypoint = (await import(serverPath + `?v=${Date.now()}`)) as ServerEntrypoint;
+	const serverPath = built.serverEntry;
+	const serverEntrypoint = (await import(serverPath + `?v=${Date.now()}`)) as ServerEntrypoint;
 
-    // Priority 1: API routes
-    const apiResponse = await serverEntrypoint.tryHandleAPI(request);
+	// Priority 1: API routes
+	const apiResponse = await serverEntrypoint.tryHandleAPI(request);
 
-    if (apiResponse !== undefined && apiResponse !== null) {
-        tags.push("api");
-        return apiResponse;
-    }
+	if (apiResponse !== undefined && apiResponse !== null) {
+		tags.push("api");
+		return apiResponse;
+	}
 
-    // Priority 2: Static files
-    const filePath = join(built.outdir, new URL(request.url).pathname);
+	// Priority 2: Static files
+	const filePath = join(built.outdir, new URL(request.url).pathname);
 
-    if (await Bun.file(filePath).exists()) {
-        tags.push("static");
-        return new Response(Bun.file(filePath));
-    }
+	if (await Bun.file(filePath).exists()) {
+		tags.push("static");
+		return new Response(Bun.file(filePath));
+	}
 
-    // Priority 3: SSR
-    const root = createHTMLRoot();
-    const renderer = ssr();
+	// Priority 3: SSR
+	const root = createHTMLRoot();
+	const renderer = ssr();
 
-    const context = new ContextScope();
+	const lifetime = new Lifetime();
+	const context = new ContextScope(lifetime);
 
-    const lifetime = new Lifetime();
+	serverEntrypoint.main({
+		root,
+		renderer,
+		pathname: new URL(request.url).pathname,
+		context,
+		lifetime
+	});
 
-    serverEntrypoint.main({
-        root,
-        renderer,
-        pathname: new URL(request.url).pathname,
-        context,
-        lifetime
-    });
+	const html = printHTML(root);
 
-    const html = printHTML(root);
+	const { readable, writable } = new TransformStream();
 
-    const { readable, writable } = new TransformStream();
+	async function load() {
+		const writer = writable.getWriter();
 
-    async function load() {
-        const writer = writable.getWriter();
+		writer.write(html);
 
-        writer.write(html);
+		let currentSnapshot = structuredClone(root);
 
-        let currentSnapshot = structuredClone(root);
+		context.streaming.updated();
 
-        context.streaming.updated();
+		context.streaming.onUpdate(() => {
+			const codegen = diffInto(currentSnapshot, root);
 
-        context.streaming.onUpdate(() => {
-            const codegen = diffInto(currentSnapshot, root);
+			const code = codegen.getCode();
 
-            const code = codegen.getCode();
+			currentSnapshot = structuredClone(root);
 
-            currentSnapshot = structuredClone(root);
+			writer.write(`<script>${code}</script>`);
+		});
 
-            writer.write(`<script>${code}</script>`);
-        });
+		await context.streaming.onDoneLoading;
 
-        await context.streaming.onDoneLoading;
+		writer.write(`<script>window.addEventListener("load", () => {wormhole.hydrate({supplement:JSON.parse(${JSON.stringify(JSON.stringify(context.query.getSupplement()))})})});</script>`);
+		writer.close();
+		lifetime.close();
+	}
 
-        writer.write(`<script>window.addEventListener("load", () => {wormhole.hydrate({})});</script>`);
-        writer.close();
-        lifetime.close();
-    }
+	load();
 
-    load();
+	tags.push("ssr");
 
-    tags.push("ssr");
-
-    return new Response(readable, {
-        status: serverEntrypoint.isRoute404(new URL(request.url).pathname) ? 404 : 200,
-        headers: {
-            'Content-Type': "text/html"
-        }
-    })
+	return new Response(readable, {
+		status: serverEntrypoint.isRoute404(new URL(request.url).pathname) ? 404 : 200,
+		headers: {
+			'Content-Type': "text/html"
+		}
+	})
 }
diff --git a/packages/wormhole/src/runtime/api.ts b/packages/wormhole/src/runtime/api.ts
index d9b0d5e..ba5a0ac 100644
--- a/packages/wormhole/src/runtime/api.ts
+++ b/packages/wormhole/src/runtime/api.ts
@@ -1,122 +1,153 @@
 import { SKL, unwrap } from "@vortexjs/common";
+import { querySchema, useQuery, type QueryProps, type Signal } from "@vortexjs/core";
 import { matchPath, type InputRoute, type RoutePath } from "~/build/router";
 import type { HTTPMethod } from "~/shared/http-method";
 import type { StandardSchemaV1 } from "~/shared/standard";
 
 interface BaseAPIProps<Input, Output> {
-	schema: StandardSchemaV1<unknown, Input>;
-	endpoint: string;
-	isQuery: boolean;
-	method: HTTPMethod;
+    schema: StandardSchemaV1<unknown, Input>;
+    endpoint: string;
+    isQuery: boolean;
+    method: HTTPMethod;
 }
 
 interface ClientAPIProps<Input, Output> extends BaseAPIProps<Input, Output> {
 }
 
 interface ServerAPIProps<Input, Output> extends BaseAPIProps<Input, Output> {
-	impl(inp: Input): Promise<Output> | Output;
+    impl(): (inp: Input) => Promise<Output> | Output;
 }
 
-export function INTERNAL_client_api<Input, Output>(props: ClientAPIProps<Input, Output>): (inp: Input) => Promise<Output> {
-	// TODO: Add proper query support once Core Query drops
-	return async (inp) => {
-		// Let's sanity check what we're giving the server for more rapid errors
-		const schema = props.schema["~standard"];
-		const result = await schema.validate(inp);
-
-		if (!("value" in result)) {
-			throw new Error([
-				`API Function call failed on client.`,
-				"",
-				"Why: The data provided didn't match the schema, and we know the server won't allow this anyways",
-				`When: When calling ${props.endpoint}`
-			].join("\n"))
-		}
-
-		const cleanInput = result.value;
-
-		const isGet = props.method === "GET";
-
-		const url = new URL(props.endpoint, window.location.href);
-
-		if (isGet) {
-			url.searchParams.set(
-				"props",
-				SKL.stringify(cleanInput, { minified: true })
-			);
-		}
-
-		const response = await fetch(url.toString(), {
-			method: props.method,
-			body: isGet ? null : SKL.stringify(cleanInput, { minified: true })
-		})
-
-		return SKL.parse(await response.text()) as Output;
-	}
+export function INTERNAL_client_api<Input, Output>(props: ClientAPIProps<Input, Output>): ((inp: Input) => Promise<Output>) & ({
+    use(args: Input, props?: QueryProps): Signal<Output | undefined>;
+} | {}) {
+    // TODO: Add proper query support once Core Query drops
+    const result = async (inp: Input) => {
+        // Let's sanity check what we're giving the server for more rapid errors
+        const schema = props.schema["~standard"];
+        const result = await schema.validate(inp);
+
+        if (!("value" in result)) {
+            throw new Error([
+                `API Function call failed on client.`,
+                "",
+                "Why: The data provided didn't match the schema, and we know the server won't allow this anyways",
+                `When: When calling ${props.endpoint}`
+            ].join("\n"))
+        }
+
+        const cleanInput = result.value;
+
+        const isGet = props.method === "GET";
+
+        const url = new URL(props.endpoint, window.location.href);
+
+        if (isGet) {
+            url.searchParams.set(
+                "props",
+                SKL.stringify(cleanInput, { minified: true })
+            );
+        }
+
+        const response = await fetch(url.toString(), {
+            method: props.method,
+            body: isGet ? null : SKL.stringify(cleanInput, { minified: true })
+        })
+
+        return SKL.parse(await response.text()) as Output;
+    }
+
+    if (props.isQuery) {
+        const qschema = querySchema({
+            id: `wormhole/${props.endpoint}:${props.method}`,
+            impl: result,
+        });
+
+        (result as any).use = (args: Input, props: QueryProps) => {
+            return useQuery(qschema, args, props);
+        }
+    }
+
+    return result;
 }
 
-export function INTERNAL_server_api<Input, Output>(props: ServerAPIProps<Input, Output>): (inp: Input) => Promise<Output> {
-	return async function (inp) {
-		return await props.impl(inp);
-	}
+export function INTERNAL_server_api<Input, Output>(props: ServerAPIProps<Input, Output>): ((inp: Input) => Promise<Output>) & ({
+    use(args: Input, props?: QueryProps): Signal<Output | undefined>;
+} | {}) {
+    const result = async function (inp: Input) {
+        return await props.impl()(inp);
+    }
+
+    if (props.isQuery) {
+        const qschema = querySchema({
+            id: `wormhole/${props.endpoint}:${props.method}`,
+            impl: result,
+        });
+
+        (result as any).use = (args: Input, props: QueryProps) => {
+            return useQuery(qschema, args, props);
+        }
+    }
+
+    return result;
 }
 
 export async function INTERNAL_tryHandleAPI(
-	request: Request,
-	apis: {
-		matcher: RoutePath;
-		impl: number;
-		schema: number;
-		method: HTTPMethod;
-	}[],
-	reexporters: (() => Promise<any>)[]
+    request: Request,
+    apis: {
+        matcher: RoutePath;
+        impl: number;
+        schema: number;
+        method: HTTPMethod;
+    }[],
+    reexporters: (() => Promise<any>)[]
 ): Promise<Response | undefined> {
-	const pathname = new URL(request.url).pathname;
-	for (const api of apis) {
-		if (!matchPath(api.matcher, pathname).matched) continue;
-		if (api.method !== request.method) continue;
-
-		const schemaPromise = unwrap(reexporters[api.schema])();
-		const implPromise = unwrap(reexporters[api.impl])();
-
-		const input = request.method === "GET"
-			? new URL(request.url).searchParams.get("props") ?? ""
-			: await request.text();
-
-		let skl: unknown;
-
-		try {
-			skl = SKL.parse(input);
-		} catch {
-			return new Response([
-				"Your API request failed.",
-				"Why: The request body is not valid SKL"
-			].join("\n"), {
-				status: 400,
-				statusText: "Invalid SKL"
-			});
-		}
-
-		const schema = (await schemaPromise) as StandardSchemaV1<any, any>;
-
-		const validation = await schema["~standard"].validate(skl);
-
-		if ("issues" in validation) {
-			return new Response([
-				"Your API request failed.",
-				"Why: The request body did not match the expected schema"
-			].join("\n"), {
-				status: 400,
-				statusText: "Failed to match against schema"
-			})
-		}
-
-		const value = validation.value;
-
-		const impl = await implPromise;
-
-		const result = await impl(value);
-
-		return new Response(SKL.stringify(result));
-	}
+    const pathname = new URL(request.url).pathname;
+    for (const api of apis) {
+        if (!matchPath(api.matcher, pathname).matched) continue;
+        if (api.method !== request.method) continue;
+
+        const schemaPromise = unwrap(reexporters[api.schema])();
+        const implPromise = unwrap(reexporters[api.impl])();
+
+        const input = request.method === "GET"
+            ? new URL(request.url).searchParams.get("props") ?? ""
+            : await request.text();
+
+        let skl: unknown;
+
+        try {
+            skl = SKL.parse(input);
+        } catch {
+            return new Response([
+                "Your API request failed.",
+                "Why: The request body is not valid SKL"
+            ].join("\n"), {
+                status: 400,
+                statusText: "Invalid SKL"
+            });
+        }
+
+        const schema = (await schemaPromise) as StandardSchemaV1<any, any>;
+
+        const validation = await schema["~standard"].validate(skl);
+
+        if ("issues" in validation) {
+            return new Response([
+                "Your API request failed.",
+                "Why: The request body did not match the expected schema"
+            ].join("\n"), {
+                status: 400,
+                statusText: "Failed to match against schema"
+            })
+        }
+
+        const value = validation.value;
+
+        const impl = await implPromise;
+
+        const result = await impl(value);
+
+        return new Response(SKL.stringify(result));
+    }
 }
diff --git a/packages/wormhole/src/runtime/entrypoint.tsx b/packages/wormhole/src/runtime/entrypoint.tsx
index eea8158..e53d786 100644
--- a/packages/wormhole/src/runtime/entrypoint.tsx
+++ b/packages/wormhole/src/runtime/entrypoint.tsx
@@ -1,124 +1,132 @@
 import { unwrap } from "@vortexjs/common";
 import {
-    useAwait,
-    ContextScope,
-    flatten,
-    type JSXNode,
-    Lifetime,
-    render,
-    type Renderer,
-    useDerived,
-    useState,
-    useStreaming,
-    when,
+	useAwait,
+	ContextScope,
+	flatten,
+	type JSXNode,
+	Lifetime,
+	render,
+	type Renderer,
+	useDerived,
+	useState,
+	useStreaming,
+	when,
+	type QuerySupplement
 } from "@vortexjs/core";
 import { matchPath, type RoutePath } from "~/build/router";
 import { initializeClientSideRouting, usePathname } from "~/runtime/csr";
 
 export interface EntrypointImport {
-    index: number;
+	index: number;
 }
 
 export interface EntrypointRoute {
-    matcher: RoutePath;
-    frames: EntrypointImport[];
-    is404: boolean;
+	matcher: RoutePath;
+	frames: EntrypointImport[];
+	is404: boolean;
 }
 
 export interface EntrypointProps {
-    routes: EntrypointRoute[];
+	routes: EntrypointRoute[];
 }
 
 function App({
-    pathname: pathnameToUse,
-    props,
-    loaders
+	pathname: pathnameToUse,
+	props,
+	loaders
 }: {
-    pathname?: string,
-    props: EntrypointProps
-    loaders: (() => Promise<any>)[],
+	pathname?: string,
+	props: EntrypointProps
+	loaders: (() => Promise<any>)[],
 }) {
-    if ("location" in globalThis) {
-        initializeClientSideRouting();
-    }
-
-    useStreaming();
-
-    const awaited = useAwait();
-    const pathname = (pathnameToUse && typeof window === "undefined") ? useState(pathnameToUse) : usePathname();
-    const route = useDerived((get) => {
-        const path = get(pathname);
-        return props.routes.find((r) => matchPath(r.matcher, path).matched);
-    });
-    const framesPromise = useDerived(async (get) => {
-        const rot = unwrap(get(route));
-        const frames = [];
-
-        for (const frame of rot.frames) {
-            frames.push(await unwrap(loaders[frame.index])());
-        }
-
-        return frames;
-    });
-    const frames = flatten(useDerived((get) => {
-        return awaited(get(framesPromise))
-    }));
-    const hierarchy = useDerived((get) => {
-        let node = <></>;
-
-        const framesResolved = get(frames);
-
-        if (!framesResolved) {
-            return <h1>loading</h1>
-        }
-
-        for (const Frame of framesResolved.toReversed()) {
-            node = <Frame>
-                {node}
-            </Frame>
-        }
-
-        return node;
-    });
-
-    return <html>
-        <head>
-            <link rel="stylesheet" href="/styles.css" />
-            <script src="/entrypoint-client.js" type="module"></script>
-        </head>
-        <body>
-            {hierarchy}
-        </body>
-    </html>;
+	if ("location" in globalThis) {
+		initializeClientSideRouting();
+	}
+
+	useStreaming();
+
+	const awaited = useAwait();
+	const pathname = (pathnameToUse && typeof window === "undefined") ? useState(pathnameToUse) : usePathname();
+	const route = useDerived((get) => {
+		const path = get(pathname);
+		return props.routes.find((r) => matchPath(r.matcher, path).matched);
+	});
+	const framesPromise = useDerived(async (get) => {
+		const rot = unwrap(get(route));
+		const frames = [];
+
+		for (const frame of rot.frames) {
+			frames.push(await unwrap(loaders[frame.index])());
+		}
+
+		return frames;
+	});
+	const frames = flatten(useDerived((get) => {
+		return awaited(get(framesPromise))
+	}));
+	const hierarchy = useDerived((get) => {
+		let node = <></>;
+
+		const framesResolved = get(frames);
+
+		if (!framesResolved) {
+			return <h1>loading</h1>
+		}
+
+		for (const Frame of framesResolved.toReversed()) {
+			node = <Frame>
+				{node}
+			</Frame>
+		}
+
+		return node;
+	});
+
+	return <html>
+		<head>
+			<link rel="stylesheet" href="/styles.css" />
+			<script src="/entrypoint-client.js" type="module"></script>
+		</head>
+		<body>
+			{hierarchy}
+		</body>
+	</html>;
 }
 
 export async function INTERNAL_entrypoint<Root>({
-    props,
-    loaders,
-    renderer,
-    root,
-    pathname,
-    lifetime = new Lifetime(),
-    context
+	props,
+	loaders,
+	renderer,
+	root,
+	pathname,
+	lifetime = new Lifetime(),
+	context: _context,
+	supplement
 }: {
-    props: EntrypointProps, loaders: (() => Promise<any>)[], renderer: Renderer<Root, any>, root: Root, pathname?: string,
-    lifetime?: Lifetime, context: ContextScope
+	props: EntrypointProps, loaders: (() => Promise<any>)[], renderer: Renderer<Root, any>, root: Root, pathname?: string,
+	lifetime?: Lifetime, context?: ContextScope, supplement?: QuerySupplement
 }) {
-    preload: if ("window" in globalThis) {
-        // We need to preload the routes so we don't flash the 'loading' state
-        const path = pathname ?? window.location.pathname;
-        const route = props.routes.find((r) => matchPath(r.matcher, path));
-        if (!route) break preload;
-
-        for (const frame of route.frames) {
-            await unwrap(loaders[frame.index])();
-        }
-    }
-
-    render({
-        context,
-        renderer,
-        root,
-        component: <App pathname={pathname} props={props} loaders={loaders} />
-    }).cascadesFrom(lifetime);
+	const context = _context ?? new ContextScope(lifetime);
+
+	preload: if ("window" in globalThis) {
+		// We need to preload the routes so we don't flash the 'loading' state
+		const path = pathname ?? window.location.pathname;
+		const route = props.routes.find((r) => matchPath(r.matcher, path));
+		if (!route) break preload;
+
+		for (const frame of route.frames) {
+			await unwrap(loaders[frame.index])();
+		}
+	}
+
+	if (supplement) {
+		context.query.hydrationSupplement = supplement;
+	}
+
+	render({
+		context,
+		renderer,
+		root,
+		component: <App pathname={pathname} props={props} loaders={loaders} />
+	}).cascadesFrom(lifetime);
 }
diff --git a/packages/wormhole/src/virt/route.ts b/packages/wormhole/src/virt/route.ts
index eb67910..988f143 100644
--- a/packages/wormhole/src/virt/route.ts
+++ b/packages/wormhole/src/virt/route.ts
@@ -1,4 +1,4 @@
-import type { JSXChildren } from "@vortexjs/core";
+import type { JSXChildren, QueryProps, Signal } from "@vortexjs/core";
 import type { StandardSchemaV1 } from "~/shared/standard";
 import type { HTTPMethod } from "~/shared/http-method";
 
@@ -13,7 +13,18 @@ export type RouteParams<Path extends string> = {
     notFound?: (props: LayoutProps<Path>) => void;
 };
 
-export type APIFunction = <Input, Output>(
+export type APIQueryFunction = <Input, Output>(
+    endpoint: string,
+    props: {
+        schema: StandardSchemaV1<unknown, Input>;
+        impl(props: Input): Promise<Output> | Output;
+        method?: HTTPMethod;
+    }
+) => ((inp: Input) => Promise<Output>) & {
+    use(args: Input, props?: QueryProps): Signal<Output | undefined>;
+};
+
+export type APIMutationFunction = <Input, Output>(
     endpoint: string,
     props: {
         schema: StandardSchemaV1<unknown, Input>;
@@ -47,11 +58,13 @@ const routeFn = ((_path, _params) => {
 export default routeFn;
 export const route = routeFn;
 
-const apiFn = ((_props) => {
+export const query = ((_props) => {
     throw new Error(
-        "You somehow managed to call query/mutation without it being eliminated by the compiler. I don't know how you would fix this, the compiler is deeply ingrained in wormhole.",
+        "You somehow managed to call query without it being eliminated by the compiler. I don't know how you would fix this, the compiler is deeply ingrained in wormhole.",
     );
-}) as APIFunction;
-
-export const query = apiFn;
-export const mutation = apiFn;
+}) as APIQueryFunction;
+export const mutation = ((_props) => {
+    throw new Error(
+        "You somehow managed to call mutation without it being eliminated by the compiler. I don't know how you would fix this, the compiler is deeply ingrained in wormhole.",
+    );
+}) as APIMutationFunction;