create-velox-app 0.4.7 → 0.4.9

package/src/templates/source/web/routes/index.auth.tsx

@@ -1,8 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { useQuery, useMutation, useQueryClient } from '@veloxts/client/react';
+import { useQueryClient } from '@veloxts/client/react';
 import { useState } from 'react';
-import type { AppRouter } from '../../../api/src/index.js';
+
 import styles from '@/App.module.css';
+import { api } from '@/api';
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -17,18 +18,13 @@ function HomePage() {
   const [error, setError] = useState('');
 
   // Check if user is logged in
-  const { data: user, isLoading } = useQuery<AppRouter, 'auth', 'getMe'>(
-    'auth',
-    'getMe',
-    {},
-    { retry: false }
-  );
+  const { data: user, isLoading } = api.auth.getMe.useQuery({}, { retry: false });
 
-  const login = useMutation<AppRouter, 'auth', 'createSession'>('auth', 'createSession', {
+  const login = api.auth.createSession.useMutation({
     onSuccess: (data) => {
       localStorage.setItem('token', data.accessToken);
       localStorage.setItem('refreshToken', data.refreshToken);
-      queryClient.invalidateQueries({ queryKey: ['auth', 'getMe'] });
+      api.auth.getMe.invalidate(undefined, queryClient);
       setError('');
     },
     onError: (err) => {
@@ -36,11 +32,11 @@ function HomePage() {
     },
   });
 
-  const register = useMutation<AppRouter, 'auth', 'createAccount'>('auth', 'createAccount', {
+  const register = api.auth.createAccount.useMutation({
     onSuccess: (data) => {
       localStorage.setItem('token', data.accessToken);
       localStorage.setItem('refreshToken', data.refreshToken);
-      queryClient.invalidateQueries({ queryKey: ['auth', 'getMe'] });
+      api.auth.getMe.invalidate(undefined, queryClient);
       setError('');
     },
     onError: (err) => {
@@ -48,11 +44,11 @@ function HomePage() {
     },
   });
 
-  const logout = useMutation<AppRouter, 'auth', 'deleteSession'>('auth', 'deleteSession', {
+  const logout = api.auth.deleteSession.useMutation({
     onSuccess: () => {
       localStorage.removeItem('token');
       localStorage.removeItem('refreshToken');
-      queryClient.setQueryData(['auth', 'getMe'], null);
+      api.auth.getMe.setData({}, null, queryClient);
     },
   });
 
@@ -87,14 +83,18 @@ function HomePage() {
         <div className={styles.cards}>
           <div className={styles.card}>
             <h2>Your Profile</h2>
-            <p><strong>ID:</strong> {user.id}</p>
-            <p><strong>Roles:</strong> {user.roles?.join(', ') || 'user'}</p>
+            <p>
+              <strong>ID:</strong> {user.id}
+            </p>
+            <p>
+              <strong>Roles:</strong> {user.roles?.join(', ') || 'user'}
+            </p>
           </div>
 
           <div className={styles.card}>
             <h2>Actions</h2>
             <button
-              onClick={() => logout.mutate()}
+              onClick={() => logout.mutate({})}
               className={styles.button}
               disabled={logout.isPending}
             >
@@ -111,9 +111,7 @@ function HomePage() {
     <div className={styles.container}>
       <div className={styles.hero}>
         <h1 className={styles.title}>Welcome to VeloxTS</h1>
-        <p className={styles.subtitle}>
-          Full-stack TypeScript with authentication.
-        </p>
+        <p className={styles.subtitle}>Full-stack TypeScript with authentication.</p>
       </div>
 
       <div className={styles.authCard}>
@@ -171,14 +169,14 @@ function HomePage() {
           >
             {login.isPending || register.isPending
               ? 'Please wait...'
-              : isLogin ? 'Sign In' : 'Create Account'}
+              : isLogin
+                ? 'Sign In'
+                : 'Create Account'}
           </button>
         </form>
 
         {!isLogin && (
-          <p className={styles.formHint}>
-            Password: 12+ chars, uppercase, lowercase, number
-          </p>
+          <p className={styles.formHint}>Password: 12+ chars, uppercase, lowercase, number</p>
         )}
       </div>
     </div>

package/src/templates/source/web/routes/index.default.tsx

@@ -1,26 +1,20 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { useQuery } from '@veloxts/client/react';
-import type { AppRouter } from '../../../api/src/index.js';
+
 import styles from '@/App.module.css';
+import { api } from '@/api';
 
 export const Route = createFileRoute('/')({
   component: HomePage,
 });
 
 function HomePage() {
-  const { data: health, isLoading, error } = useQuery<AppRouter, 'health', 'check'>(
-    'health',
-    'check',
-    {}
-  );
+  const { data: health, isLoading, error } = api.health.check.useQuery({});
 
   return (
     <div className={styles.container}>
       <div className={styles.hero}>
         <h1 className={styles.title}>Welcome to VeloxTS</h1>
-        <p className={styles.subtitle}>
-          Full-stack TypeScript, beautifully simple.
-        </p>
+        <p className={styles.subtitle}>Full-stack TypeScript, beautifully simple.</p>
       </div>
 
       <div className={styles.cards}>
@@ -31,19 +25,19 @@ function HomePage() {
           ) : error ? (
             <p className={styles.error}>Disconnected</p>
           ) : (
-            <p className={styles.success}>
-              {health?.status === 'ok' ? 'Connected' : 'Unknown'}
-            </p>
-          )}
-          {health && (
-            <p className={styles.meta}>v{health.version}</p>
+            <p className={styles.success}>{health?.status === 'ok' ? 'Connected' : 'Unknown'}</p>
           )}
+          {health && <p className={styles.meta}>v{health.version}</p>}
         </div>
 
         <div className={styles.card}>
           <h2>Get Started</h2>
-          <p>Edit <code>apps/api/src/procedures</code> to add API endpoints.</p>
-          <p>Edit <code>apps/web/src/routes</code> to add pages.</p>
+          <p>
+            Edit <code>apps/api/src/procedures</code> to add API endpoints.
+          </p>
+          <p>
+            Edit <code>apps/web/src/routes</code> to add pages.
+          </p>
         </div>
 
         <div className={styles.card}>

package/src/templates/source/web/routes/users.tsx

@@ -1,70 +1,85 @@
 /**
- * Users Page - Demonstrates type-safe data fetching with VeloxTS hooks
+ * Users Page - Demonstrates React 19 patterns with VeloxTS
+ *
+ * Uses useSuspenseQuery with Suspense boundaries for cleaner component code.
+ * Data is guaranteed to be available when the component renders.
  */
 
 import { createFileRoute } from '@tanstack/react-router';
-import { useQuery } from '@veloxts/client/react';
-import type { AppRouter } from '../../../api/src/index.js';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
 import styles from '@/App.module.css';
+import { api } from '@/api';
 
 export const Route = createFileRoute('/users')({
   component: UsersPage,
 });
 
 function UsersPage() {
-  const { data, isLoading, error } = useQuery<AppRouter, 'users', 'listUsers'>(
-    'users',
-    'listUsers',
-    {}
-  );
-
   return (
     <div className={styles.container}>
       <div className={styles.hero}>
         <h1 className={styles.title}>Users</h1>
-        <p className={styles.subtitle}>
-          Type-safe data fetching with VeloxTS hooks
-        </p>
+        <p className={styles.subtitle}>Type-safe data fetching with React 19 Suspense</p>
       </div>
 
-      {isLoading ? (
-        <p className={styles.loading}>Loading users...</p>
-      ) : error ? (
-        <p className={styles.error}>Error: {error.message}</p>
-      ) : (
-        <div className={styles.tableContainer}>
-          <table className={styles.table}>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Email</th>
-                <th>Created</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data?.data.map((user) => (
-                <tr key={user.id}>
-                  <td>{user.name}</td>
-                  <td>{user.email}</td>
-                  <td>{new Date(user.createdAt).toLocaleDateString()}</td>
-                </tr>
-              ))}
-              {data?.data.length === 0 && (
-                <tr>
-                  <td colSpan={3} className={styles.emptyState}>
-                    No users found. Create one via the API!
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-          {data && (
-            <p className={styles.meta}>
-              Page {data.meta.page} - {data.meta.total} total users
-            </p>
+      <ErrorBoundary fallback={<UsersError />}>
+        <Suspense fallback={<UsersLoading />}>
+          <UsersTable />
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+/**
+ * Users table component - wrapped in Suspense
+ *
+ * With useSuspenseQuery, data is guaranteed to be available.
+ * No need for isLoading/error checks - handled by boundaries.
+ */
+function UsersTable() {
+  const { data } = api.users.listUsers.useSuspenseQuery({});
+
+  return (
+    <div className={styles.tableContainer}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Created</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.data.map((user) => (
+            <tr key={user.id}>
+              <td>{user.name}</td>
+              <td>{user.email}</td>
+              <td>{new Date(user.createdAt).toLocaleDateString()}</td>
+            </tr>
+          ))}
+          {data.data.length === 0 && (
+            <tr>
+              <td colSpan={3} className={styles.emptyState}>
+                No users found. Create one via the API!
+              </td>
+            </tr>
           )}
-        </div>
-      )}
+        </tbody>
+      </table>
+      <p className={styles.meta}>
+        Page {data.meta.page} - {data.meta.total} total users
+      </p>
     </div>
   );
 }
+
+function UsersLoading() {
+  return <p className={styles.loading}>Loading users...</p>;
+}
+
+function UsersError() {
+  return <p className={styles.error}>Failed to load users. Please try again.</p>;
+}

package/src/templates/source/web/vite.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { tanstackRouter } from '@tanstack/router-plugin/vite';
 import path from 'node:path';
 
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
 export default defineConfig({
   plugins: [tanstackRouter(), react()],
   resolve: {