chore(examples): Fix with-trpc examples

examples/react/with-trpc-react-query/package.json

@@ -3,31 +3,36 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && tsc --noEmit",
-    "start": "vite start"
+    "dev": "pnpm tsx ./src/server/server.ts --watch",
+    "build": "pnpm run build:server && pnpm run build:client",
+    "build:client": "vite build && tsc --noEmit",
+    "build:server": "vite build --mode server",
+    "start": "NODE_ENV=production node dist/server/server.js"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.123.0",
     "@tanstack/react-router-devtools": "^1.123.0",
     "@tanstack/router-plugin": "^1.123.0",
-    "@tanstack/react-start": "^1.123.0",
-    "@trpc/client": "11.0.0-rc.772",
-    "@trpc/server": "11.0.0-rc.772",
-    "@trpc/tanstack-react-query": "11.0.0-rc.772",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "redaxios": "^0.5.1",
-    "postcss": "^8.5.1",
+    "@trpc/client": "^11.4.3",
+    "@trpc/server": "^11.4.3",
+    "@trpc/tanstack-react-query": "^11.4.3",
     "autoprefixer": "^10.4.20",
+    "express": "^4.21.2",
+    "postcss": "^8.5.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "redaxios": "^0.5.1",
     "tailwindcss": "^3.4.17",
     "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@types/express": "^4.17.23",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-react": "^4.3.4"
+    "@vitejs/plugin-react": "^4.3.4",
+    "tsx": "^4.20.3",
+    "vite": "^6.3.5"
   }
 }

examples/react/with-trpc-react-query/src/routeTree.gen.ts

@@ -8,105 +8,141 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-// Import Routes
-
-import { Route as rootRoute } from './routes/__root'
-import { Route as DashboardImport } from './routes/dashboard'
-import { Route as IndexImport } from './routes/index'
-import { Route as DashboardIndexImport } from './routes/dashboard.index'
-import { Route as DashboardPostsImport } from './routes/dashboard.posts'
-import { Route as DashboardPostsIndexImport } from './routes/dashboard.posts.index'
-import { Route as DashboardPostsPostIdImport } from './routes/dashboard.posts.$postId'
-
-// Create/Update Routes
-
-const DashboardRoute = DashboardImport.update({
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as DashboardRouteImport } from './routes/dashboard'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as DashboardIndexRouteImport } from './routes/dashboard.index'
+import { Route as DashboardPostsRouteImport } from './routes/dashboard.posts'
+import { Route as DashboardPostsIndexRouteImport } from './routes/dashboard.posts.index'
+import { Route as DashboardPostsPostIdRouteImport } from './routes/dashboard.posts.$postId'
+
+const DashboardRoute = DashboardRouteImport.update({
   id: '/dashboard',
   path: '/dashboard',
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => rootRouteImport,
 } as any)
-
-const IndexRoute = IndexImport.update({
+const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => rootRouteImport,
 } as any)
-
-const DashboardIndexRoute = DashboardIndexImport.update({
+const DashboardIndexRoute = DashboardIndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => DashboardRoute,
 } as any)
-
-const DashboardPostsRoute = DashboardPostsImport.update({
+const DashboardPostsRoute = DashboardPostsRouteImport.update({
   id: '/posts',
   path: '/posts',
   getParentRoute: () => DashboardRoute,
 } as any)
-
-const DashboardPostsIndexRoute = DashboardPostsIndexImport.update({
+const DashboardPostsIndexRoute = DashboardPostsIndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => DashboardPostsRoute,
 } as any)
-
-const DashboardPostsPostIdRoute = DashboardPostsPostIdImport.update({
+const DashboardPostsPostIdRoute = DashboardPostsPostIdRouteImport.update({
   id: '/$postId',
   path: '/$postId',
   getParentRoute: () => DashboardPostsRoute,
 } as any)
 
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/dashboard': typeof DashboardRouteWithChildren
+  '/dashboard/posts': typeof DashboardPostsRouteWithChildren
+  '/dashboard/': typeof DashboardIndexRoute
+  '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
+  '/dashboard/posts/': typeof DashboardPostsIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/dashboard': typeof DashboardIndexRoute
+  '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
+  '/dashboard/posts': typeof DashboardPostsIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/dashboard': typeof DashboardRouteWithChildren
+  '/dashboard/posts': typeof DashboardPostsRouteWithChildren
+  '/dashboard/': typeof DashboardIndexRoute
+  '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
+  '/dashboard/posts/': typeof DashboardPostsIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/dashboard'
+    | '/dashboard/posts'
+    | '/dashboard/'
+    | '/dashboard/posts/$postId'
+    | '/dashboard/posts/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/dashboard' | '/dashboard/posts/$postId' | '/dashboard/posts'
+  id:
+    | '__root__'
+    | '/'
+    | '/dashboard'
+    | '/dashboard/posts'
+    | '/dashboard/'
+    | '/dashboard/posts/$postId'
+    | '/dashboard/posts/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  DashboardRoute: typeof DashboardRouteWithChildren
+}
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexImport
-      parentRoute: typeof rootRoute
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/dashboard': {
-      id: '/dashboard'
-      path: '/dashboard'
-      fullPath: '/dashboard'
-      preLoaderRoute: typeof DashboardImport
-      parentRoute: typeof rootRoute
+    '/dashboard/': {
+      id: '/dashboard/'
+      path: '/'
+      fullPath: '/dashboard/'
+      preLoaderRoute: typeof DashboardIndexRouteImport
+      parentRoute: typeof DashboardRoute
     }
     '/dashboard/posts': {
       id: '/dashboard/posts'
       path: '/posts'
       fullPath: '/dashboard/posts'
-      preLoaderRoute: typeof DashboardPostsImport
-      parentRoute: typeof DashboardImport
+      preLoaderRoute: typeof DashboardPostsRouteImport
+      parentRoute: typeof DashboardRoute
     }
-    '/dashboard/': {
-      id: '/dashboard/'
+    '/dashboard/posts/': {
+      id: '/dashboard/posts/'
       path: '/'
-      fullPath: '/dashboard/'
-      preLoaderRoute: typeof DashboardIndexImport
-      parentRoute: typeof DashboardImport
+      fullPath: '/dashboard/posts/'
+      preLoaderRoute: typeof DashboardPostsIndexRouteImport
+      parentRoute: typeof DashboardPostsRoute
     }
     '/dashboard/posts/$postId': {
       id: '/dashboard/posts/$postId'
       path: '/$postId'
       fullPath: '/dashboard/posts/$postId'
-      preLoaderRoute: typeof DashboardPostsPostIdImport
-      parentRoute: typeof DashboardPostsImport
-    }
-    '/dashboard/posts/': {
-      id: '/dashboard/posts/'
-      path: '/'
-      fullPath: '/dashboard/posts/'
-      preLoaderRoute: typeof DashboardPostsIndexImport
-      parentRoute: typeof DashboardPostsImport
+      preLoaderRoute: typeof DashboardPostsPostIdRouteImport
+      parentRoute: typeof DashboardPostsRoute
     }
   }
 }
 
-// Create and export the route tree
-
 interface DashboardPostsRouteChildren {
   DashboardPostsPostIdRoute: typeof DashboardPostsPostIdRoute
   DashboardPostsIndexRoute: typeof DashboardPostsIndexRoute
@@ -135,108 +171,10 @@ const DashboardRouteWithChildren = DashboardRoute._addFileChildren(
   DashboardRouteChildren,
 )
 
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/dashboard': typeof DashboardRouteWithChildren
-  '/dashboard/posts': typeof DashboardPostsRouteWithChildren
-  '/dashboard/': typeof DashboardIndexRoute
-  '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
-  '/dashboard/posts/': typeof DashboardPostsIndexRoute
-}
-
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/dashboard': typeof DashboardIndexRoute
-  '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
-  '/dashboard/posts': typeof DashboardPostsIndexRoute
-}
-
-export interface FileRoutesById {
-  __root__: typeof rootRoute
-  '/': typeof IndexRoute
-  '/dashboard': typeof DashboardRouteWithChildren
-  '/dashboard/posts': typeof DashboardPostsRouteWithChildren
-  '/dashboard/': typeof DashboardIndexRoute
-  '/dashboard/posts/$postId': typeof DashboardPostsPostIdRoute
-  '/dashboard/posts/': typeof DashboardPostsIndexRoute
-}
-
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/dashboard'
-    | '/dashboard/posts'
-    | '/dashboard/'
-    | '/dashboard/posts/$postId'
-    | '/dashboard/posts/'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/dashboard' | '/dashboard/posts/$postId' | '/dashboard/posts'
-  id:
-    | '__root__'
-    | '/'
-    | '/dashboard'
-    | '/dashboard/posts'
-    | '/dashboard/'
-    | '/dashboard/posts/$postId'
-    | '/dashboard/posts/'
-  fileRoutesById: FileRoutesById
-}
-
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  DashboardRoute: typeof DashboardRouteWithChildren
-}
-
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   DashboardRoute: DashboardRouteWithChildren,
 }
-
-export const routeTree = rootRoute
+export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
-
-/* ROUTE_MANIFEST_START
-{
-  "routes": {
-    "__root__": {
-      "filePath": "__root.tsx",
-      "children": [
-        "/",
-        "/dashboard"
-      ]
-    },
-    "/": {
-      "filePath": "index.tsx"
-    },
-    "/dashboard": {
-      "filePath": "dashboard.tsx",
-      "children": [
-        "/dashboard/posts",
-        "/dashboard/"
-      ]
-    },
-    "/dashboard/posts": {
-      "filePath": "dashboard.posts.tsx",
-      "parent": "/dashboard",
-      "children": [
-        "/dashboard/posts/$postId",
-        "/dashboard/posts/"
-      ]
-    },
-    "/dashboard/": {
-      "filePath": "dashboard.index.tsx",
-      "parent": "/dashboard"
-    },
-    "/dashboard/posts/$postId": {
-      "filePath": "dashboard.posts.$postId.tsx",
-      "parent": "/dashboard/posts"
-    },
-    "/dashboard/posts/": {
-      "filePath": "dashboard.posts.index.tsx",
-      "parent": "/dashboard/posts"
-    }
-  }
-}
-ROUTE_MANIFEST_END */