start-core/server-functions

Create type-safe server functions in TanStack Start using createServerFn with validation and error handling.

1.4k|34|Updated Mar 7, 2024
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill start-core-server-functions-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: start-core/server-functions
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-start-server-functions
Command: npx skills add https://github.com/mehdibha/dotUI --skill start-core-server-functions-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-start, @tanstack/react-router, zod.

What problem does it solve? TanStack Start loaders are isomorphic and run on both client and server, so database queries, file system access, and secret API keys placed directly in loaders leak to the client bundle. This Skill provides the correct patterns for isolating server-only logic using createServerFn. ## Core Features & Use Cases - Type-Safe RPCs: Create GET and POST server functions with createServerFn that run exclusively on the server but are callable from loaders, components, and hooks. - Input Validation: Validate inputs with plain functions or Zod schemas, including FormData handling for form submissions. - Server Context & Errors: Access request headers, set response headers and status codes, and throw errors, redirects, or notFound responses from handlers. - Use Case: Build a posts dashboard where a loader calls a getPosts server function for database queries, and a delete button uses useServerFn to invoke a validated deletePost mutation from an event handler. ## Quick Start Create a TanStack Start server function that fetches posts from the database and call it from a route loader.

Frequently Asked Questions about start-core/server-functions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a server function in TanStack Start?▼

Use createServerFn from @tanstack/react-start, optionally pass { method: "POST" } (GET is default), chain inputValidator for typed input, and define logic in handler. Call it from loaders, components, or other server functions like a normal async function.

How do I validate server function input with Zod?▼

Pass a Zod schema directly to inputValidator, such as z.object({ name: z.string().min(1) }). The handler receives the parsed, type-safe data, and invalid input is rejected before the handler runs.

Can I put database queries directly in a TanStack Start loader?▼

No. Loaders are isomorphic and run on both client and server, so database queries and secret keys in loaders leak to the client bundle. Wrap server-only logic in createServerFn and call that function from the loader.

Does TanStack Start support "use server" directives like Next.js?▼

No. TanStack Start does not use "use server" directives or getServerSideProps. All server-side logic is defined exclusively through createServerFn, which the build replaces with RPC stubs in client bundles.

Why is my TanStack Start server function returning a function instead of data?▼

createServerFn returns a callable function, not a Promise, so you must invoke it with parentheses: await getItems() or await getItems({ data: { id: "1" } }). Awaiting the reference without calling it returns the function itself.

How do I access request headers inside a server function?▼

Import getRequest, getRequestHeader, setResponseHeaders, and setResponseStatus from @tanstack/react-start/server. These utilities work inside server function handlers to read incoming request details and control the outgoing response.