Skip to content

Commit e99a2eb

Browse files
nshennshen
committed
chore: align tanstack SSR with official docs and upgrade toolchain
- Adopt official @tanstack/react-router-ssr-query (setupRouterSsrQueryIntegration); drop manual QueryClientProvider, isServer singleton, and pending dehydrate config - Switch ssr playground to useSuspenseQuery + direct loader return per docs - Upgrade vite 7→8, @vitejs/plugin-react 5→6, typescript 5.9→6 (catalog) - Drop vite-tsconfig-paths plugin in favor of Vite 8 native resolve.tsconfigPaths - Remove deprecated baseUrl from tsconfigs (TS 7 will remove it) - Fix UI package tsconfig (drop wrong cloudflare/env.d.ts types) - Add globals.d.ts for TS 6 stricter css side-effect import checks (TS2882) - Remove unused @nn-stack/cli package
1 parent 6ea90b0 commit e99a2eb

35 files changed

Lines changed: 934 additions & 1978 deletions

‎apps/server/tsconfig.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"extends": "@nn-stack/config/tsconfig.base.json",
33
"compilerOptions": {
44
"composite": true,
5-
"baseUrl": ".",
65
"paths": {
76
"@/*": ["./src/*"]
87
},

‎apps/tanstack/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,16 @@
1414
"format": "biome format --write"
1515
},
1616
"dependencies": {
17-
"@nn-stack/api": "workspace:*",
18-
"@nn-stack/ui": "workspace:*",
1917
"@fontsource-variable/geist": "^5.2.8",
2018
"@fontsource-variable/geist-mono": "^5.2.7",
19+
"@nn-stack/api": "workspace:*",
20+
"@nn-stack/ui": "workspace:*",
2121
"@orpc/client": "catalog:",
2222
"@orpc/tanstack-query": "catalog:",
2323
"@tanstack/react-query": "^5.90.12",
24-
"@tanstack/react-router": "^1.167.16",
25-
"@tanstack/react-start": "^1.167.16",
24+
"@tanstack/react-router": "^1.168.25",
25+
"@tanstack/react-router-ssr-query": "^1.166.12",
26+
"@tanstack/react-start": "^1.167.50",
2627
"lucide-react": "catalog:",
2728
"react": "catalog:",
2829
"react-dom": "catalog:",
@@ -36,10 +37,9 @@
3637
"@types/node": "catalog:",
3738
"@types/react": "catalog:",
3839
"@types/react-dom": "catalog:",
39-
"@vitejs/plugin-react": "^5.2.0",
40+
"@vitejs/plugin-react": "^6.0.1",
4041
"alchemy": "catalog:",
4142
"typescript": "catalog:",
42-
"vite": "^7.3.1",
43-
"vite-tsconfig-paths": "^6.1.1"
43+
"vite": "^8.0.10"
4444
}
4545
}

‎apps/tanstack/src/lib/query-client.ts‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎apps/tanstack/src/router.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1+
import { QueryClient } from '@tanstack/react-query';
12
import { createRouter as createTanstackRouter } from '@tanstack/react-router';
3+
import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query';
24
import { routeTree } from './routeTree.gen';
3-
import { getQueryClient } from './lib/query-client';
45

56
export function getRouter() {
6-
const queryClient = getQueryClient();
7+
const queryClient = new QueryClient({
8+
defaultOptions: {
9+
queries: {
10+
staleTime: 60 * 1000,
11+
},
12+
},
13+
});
714

815
const router = createTanstackRouter({
916
routeTree,
@@ -14,5 +21,10 @@ export function getRouter() {
1421
defaultPreload: 'intent',
1522
});
1623

24+
setupRouterSsrQueryIntegration({
25+
router,
26+
queryClient,
27+
});
28+
1729
return router;
1830
}

‎apps/tanstack/src/routes/__root.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { QueryClient } from '@tanstack/react-query';
2-
import { QueryClientProvider } from '@tanstack/react-query';
32
import {
43
HeadContent,
54
Outlet,
@@ -30,22 +29,18 @@ export const Route = createRootRouteWithContext<{
3029
});
3130

3231
function RootComponent() {
33-
const { queryClient } = Route.useRouteContext();
34-
3532
return (
3633
<html lang="en">
3734
<head>
3835
<HeadContent />
3936
</head>
4037
<body className="font-sans antialiased" suppressHydrationWarning>
41-
<QueryClientProvider client={queryClient}>
42-
<TooltipProvider>
43-
<div className="min-h-svh w-full flex flex-col">
44-
<Outlet />
45-
</div>
46-
<Toaster richColors />
47-
</TooltipProvider>
48-
</QueryClientProvider>
38+
<TooltipProvider>
39+
<div className="min-h-svh w-full flex flex-col">
40+
<Outlet />
41+
</div>
42+
<Toaster richColors />
43+
</TooltipProvider>
4944
<Scripts />
5045
</body>
5146
</html>

‎apps/tanstack/src/routes/playground/ssr.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { createFileRoute } from '@tanstack/react-router';
2-
import { useQuery } from '@tanstack/react-query';
2+
import { useSuspenseQuery } from '@tanstack/react-query';
33
import { orpc } from '~/lib/orpc';
44
import { Card, CardContent, CardHeader, CardTitle } from '@nn-stack/ui/components/card';
55
import { Badge } from '@nn-stack/ui/components/badge';
66
import { SourceCodeButton } from '~/components/source-code-button';
77

88
export const Route = createFileRoute('/playground/ssr')({
9-
loader: async ({ context }) => {
10-
// Prefetch data on the server via route loader
11-
await context.queryClient.ensureQueryData(orpc.planet.list.queryOptions());
12-
},
9+
loader: ({ context }) =>
10+
context.queryClient.ensureQueryData(orpc.planet.list.queryOptions()),
1311
component: SSRDemoPage,
1412
});
1513

@@ -35,18 +33,16 @@ function SSRDemoPage() {
3533
}
3634

3735
function PlanetsList() {
38-
const { data: planets, isLoading } = useQuery(orpc.planet.list.queryOptions());
39-
40-
if (isLoading) return <div>Loading planets...</div>;
36+
const { data: planets } = useSuspenseQuery(orpc.planet.list.queryOptions());
4137

4238
return (
4339
<div className="space-y-4">
4440
<h2 className="text-xl font-semibold">Planets List (Hydrated)</h2>
45-
{planets?.length === 0 ? (
41+
{planets.length === 0 ? (
4642
<p>No planets found.</p>
4743
) : (
4844
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
49-
{planets?.map((planet) => (
45+
{planets.map((planet) => (
5046
<Card key={planet.id}>
5147
<CardHeader className="pb-2">
5248
<CardTitle className="flex justify-between items-center text-lg">

‎apps/tanstack/tsconfig.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
22
"extends": "@nn-stack/config/tsconfig.base.json",
33
"compilerOptions": {
4+
"jsx": "react-jsx",
5+
"noEmit": true,
46
"paths": {
57
"~/*": ["./src/*"],
68
"@nn-stack/ui/*": ["../../packages/ui/src/*"]

‎apps/tanstack/vite.config.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { defineConfig } from 'vite';
2-
import tsConfigPaths from 'vite-tsconfig-paths';
32
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
43
import tailwindcss from '@tailwindcss/vite';
54
import viteReact from '@vitejs/plugin-react';
@@ -9,5 +8,8 @@ export default defineConfig({
98
port: 3001,
109
},
1110
envPrefix: 'NEXT_PUBLIC_',
12-
plugins: [tsConfigPaths(), tanstackStart(), viteReact(), tailwindcss()],
11+
resolve: {
12+
tsconfigPaths: true,
13+
},
14+
plugins: [tanstackStart(), viteReact(), tailwindcss()],
1315
});

‎apps/web/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ declare module 'cloudflare:workers' {
1111
export interface Env extends WebEnv, ApiEnv {}
1212
}
1313
}
14+

‎apps/web/globals.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare module '*.css';
2+
declare module '*.css?url';

0 commit comments

Comments
 (0)