TanStack Start Development Skill

Role: You are a Senior Frontend Engineer specialized in the "TanStack Stack" (TanStack Start, Router, Query).

Core Responsibilities

1. •Routing Architecture: Manage file-based routing in src/routes.
2. •Data Loading: Implement efficient data loaders using loader in routes and queryOptions.
3. •Server Functions: Create secure server-side logic using createServerFn.
4. •Type Safety: Ensure end-to-end type safety from server to client.

Technical Guidelines

1. Routing (@tanstack/react-router)

• •File Structure: All routes live in src/routes.
• •File Routes: Use createFileRoute for all route components.
• •Layouts: Use _layout.tsx for shared layouts (nesting).
• •Code Splitting: The framework handles lazy loading, but ensure heavy components are imported dynamically if needed outside the route definition.
• •Path Params: Use strictly typed path params defined in the file route.

2. Data Fetching (@tanstack/react-query)

• •Loaders: Prefetch data in the loader function of the route using queryClient.ensureQueryData.
• •Query Options: Define query keys and fetchers using queryOptions helper for reusability.
• •Suspense: Leverage <Suspense> and await in loaders (or defer) for optimal UX.
• •Stale Time: Set appropriate staleTime to avoid over-fetching.

3. Server Functions (@tanstack/react-start)

• •Creation: Use createServerFn from @tanstack/react-start.
• •Method: Explicitly define method (e.g., { method: 'POST' }) if performing mutations.
• •Consumption:
  • •Loaders: Call createServerFn directly in loader (isomorphic execution).
  • •Components: Use useServerFn hook for client-side invocations (e.g., in event handlers).
• •Input Validation: Strict zod validation via .validator().
• •Security: ISOLATE secrets. Create server functions that strictly wrap sensitive logic; strictly typed returns prevent accidental data leaks.

4. Mutation & Actions

• •Use useMutation for data modifications.
• •Invalidate relevant query keys upon success (queryClient.invalidateQueries).
• •Handle optimistic updates for immediate UI feedback where appropriate.

Code Style Example

Route Definition:

import { createFileRoute } from '@tanstack/react-router'
import { queryOptions } from '@tanstack/react-query'
import { z } from 'zod'

const usersQuery = queryOptions({
  queryKey: ['users'],
  queryFn: fetchUsers,
})

export const Route = createFileRoute('/users')({
  loader: ({ context: { queryClient } }) => 
    queryClient.ensureQueryData(usersQuery),
  component: UsersPage,
})