Skip to content

Commit a54628b

Browse files
juliusmarmingejuliusmarminge
committed
add simple start example
1 parent c0781f5 commit a54628b

23 files changed

Lines changed: 1925 additions & 43 deletions

File tree

‎examples/react/react-start/.gitignore‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
5+
.DS_Store
6+
.cache
7+
.env
8+
.vercel
9+
.output
10+
/build/
11+
/api/
12+
/server/build
13+
/public/build# Sentry Config File
14+
.env.sentry-build-plugin
15+
/test-results/
16+
/playwright-report/
17+
/blob-report/
18+
/playwright/.cache/

‎examples/react/react-start/.prettierignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
**/build
2+
**/public
3+
pnpm-lock.yaml
4+
routeTree.gen.ts

‎examples/react/react-start/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/react/react-start/README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# TanStack Start - Basic React Query Example
2+
3+
A TanStack Start example demonstrating integration with TanStack Query (React Query).
4+
5+
- [TanStack Router Docs](https://tanstack.com/router)
6+
- [TanStack Query Docs](https://tanstack.com/query)
7+
8+
## Start a new project based on this example
9+
10+
To start a new project based on this example, run:
11+
12+
```sh
13+
npx gitpick TanStack/router/tree/main/examples/react/start-basic-react-query start-basic-react-query
14+
```
15+
16+
## Getting Started
17+
18+
From your terminal:
19+
20+
```sh
21+
pnpm install
22+
pnpm dev
23+
```
24+
25+
This starts your app in development mode, rebuilding assets on file changes.
26+
27+
## Build
28+
29+
To build the app for production:
30+
31+
```sh
32+
pnpm build
33+
```
34+
35+
## TanStack Query Integration
36+
37+
This example demonstrates how to use TanStack Query with TanStack Start for:
38+
39+
- Server-side data fetching
40+
- Client-side caching and synchronization
41+
- Optimistic updates
42+
- Automatic refetching

‎examples/react/react-start/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "@tanstack/query-example-react-start",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite dev",
8+
"build": "vite build && tsc --noEmit",
9+
"preview": "vite preview",
10+
"start": "pnpx srvx --prod -s ../client dist/server/server.js"
11+
},
12+
"dependencies": {
13+
"@tanstack/react-query": "^5.90.16",
14+
"@tanstack/react-query-devtools": "^5.91.2",
15+
"@tanstack/react-router": "^1.144.0",
16+
"@tanstack/react-router-devtools": "^1.144.0",
17+
"@tanstack/react-router-ssr-query": "^1.144.0",
18+
"@tanstack/react-start": "^1.145.3",
19+
"react": "^19.0.0",
20+
"react-dom": "^19.0.0"
21+
},
22+
"devDependencies": {
23+
"@types/node": "^22.5.4",
24+
"@types/react": "^19.0.8",
25+
"@types/react-dom": "^19.0.3",
26+
"@vitejs/plugin-react": "^4.3.4",
27+
"typescript": "5.8.3",
28+
"vite": "^6.3.6"
29+
}
30+
}

‎examples/react/react-start/src/components/Button.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
3+
import Spinner from './Spinner'
4+
5+
export default function Button({
6+
children,
7+
onClick,
8+
}: {
9+
children: React.ReactNode
10+
onClick: any
11+
}) {
12+
const [isPending, startTransition] = React.useTransition()
13+
14+
const handleClick = (e: any) => {
15+
startTransition(() => {
16+
onClick(e)
17+
})
18+
}
19+
20+
return (
21+
<>
22+
<button onClick={handleClick} disabled={isPending}>
23+
{children} {isPending ? <Spinner /> : null}
24+
</button>
25+
</>
26+
)
27+
}

‎examples/react/react-start/src/components/DefaultCatchBoundary.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {
2+
ErrorComponent,
3+
Link,
4+
rootRouteId,
5+
useMatch,
6+
useRouter,
7+
} from '@tanstack/react-router'
8+
import type { ErrorComponentProps } from '@tanstack/react-router'
9+
10+
export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
11+
const router = useRouter()
12+
const isRoot = useMatch({
13+
strict: false,
14+
select: (state) => state.id === rootRouteId,
15+
})
16+
17+
console.error(error)
18+
19+
return (
20+
<div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
21+
<ErrorComponent error={error} />
22+
<div className="flex gap-2 items-center flex-wrap">
23+
<button
24+
onClick={() => {
25+
router.invalidate()
26+
}}
27+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
28+
>
29+
Try Again
30+
</button>
31+
{isRoot ? (
32+
<Link
33+
to="/"
34+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
35+
>
36+
Home
37+
</Link>
38+
) : (
39+
<Link
40+
to="/"
41+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
42+
onClick={(e) => {
43+
e.preventDefault()
44+
window.history.back()
45+
}}
46+
>
47+
Go Back
48+
</Link>
49+
)}
50+
</div>
51+
</div>
52+
)
53+
}

‎examples/react/react-start/src/components/NotFound.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Link } from '@tanstack/react-router'
2+
3+
export function NotFound({ children }: { children?: any }) {
4+
return (
5+
<div className="space-y-2 p-2">
6+
<div className="text-gray-600 dark:text-gray-400">
7+
{children || <p>The page you are looking for does not exist.</p>}
8+
</div>
9+
<p className="flex items-center gap-2 flex-wrap">
10+
<button
11+
onClick={() => window.history.back()}
12+
className="bg-emerald-500 text-white px-2 py-1 rounded-sm uppercase font-black text-sm"
13+
>
14+
Go back
15+
</button>
16+
<Link
17+
to="/"
18+
className="bg-cyan-600 text-white px-2 py-1 rounded-sm uppercase font-black text-sm"
19+
>
20+
Start Over
21+
</Link>
22+
</p>
23+
</div>
24+
)
25+
}

‎examples/react/react-start/src/components/Spinner.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
3+
export default function Spinner() {
4+
return (
5+
<span
6+
className="fa fa-circle-o-notch fa-spin"
7+
style={{
8+
marginLeft: 4,
9+
fontSize: 'small',
10+
}}
11+
/>
12+
)
13+
}

‎examples/react/react-start/src/routeTree.gen.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* eslint-disable */
2+
3+
// @ts-nocheck
4+
5+
// noinspection JSUnusedGlobalSymbols
6+
7+
// This file was automatically generated by TanStack Router.
8+
// You should NOT make any changes in this file as it will be overwritten.
9+
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10+
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as IndexRouteImport } from './routes/index'
13+
import { Route as ProjectsProjectIdRouteImport } from './routes/projects.$projectId'
14+
15+
const IndexRoute = IndexRouteImport.update({
16+
id: '/',
17+
path: '/',
18+
getParentRoute: () => rootRouteImport,
19+
} as any)
20+
const ProjectsProjectIdRoute = ProjectsProjectIdRouteImport.update({
21+
id: '/projects/$projectId',
22+
path: '/projects/$projectId',
23+
getParentRoute: () => rootRouteImport,
24+
} as any)
25+
26+
export interface FileRoutesByFullPath {
27+
'/': typeof IndexRoute
28+
'/projects/$projectId': typeof ProjectsProjectIdRoute
29+
}
30+
export interface FileRoutesByTo {
31+
'/': typeof IndexRoute
32+
'/projects/$projectId': typeof ProjectsProjectIdRoute
33+
}
34+
export interface FileRoutesById {
35+
__root__: typeof rootRouteImport
36+
'/': typeof IndexRoute
37+
'/projects/$projectId': typeof ProjectsProjectIdRoute
38+
}
39+
export interface FileRouteTypes {
40+
fileRoutesByFullPath: FileRoutesByFullPath
41+
fullPaths: '/' | '/projects/$projectId'
42+
fileRoutesByTo: FileRoutesByTo
43+
to: '/' | '/projects/$projectId'
44+
id: '__root__' | '/' | '/projects/$projectId'
45+
fileRoutesById: FileRoutesById
46+
}
47+
export interface RootRouteChildren {
48+
IndexRoute: typeof IndexRoute
49+
ProjectsProjectIdRoute: typeof ProjectsProjectIdRoute
50+
}
51+
52+
declare module '@tanstack/react-router' {
53+
interface FileRoutesByPath {
54+
'/': {
55+
id: '/'
56+
path: '/'
57+
fullPath: '/'
58+
preLoaderRoute: typeof IndexRouteImport
59+
parentRoute: typeof rootRouteImport
60+
}
61+
'/projects/$projectId': {
62+
id: '/projects/$projectId'
63+
path: '/projects/$projectId'
64+
fullPath: '/projects/$projectId'
65+
preLoaderRoute: typeof ProjectsProjectIdRouteImport
66+
parentRoute: typeof rootRouteImport
67+
}
68+
}
69+
}
70+
71+
const rootRouteChildren: RootRouteChildren = {
72+
IndexRoute: IndexRoute,
73+
ProjectsProjectIdRoute: ProjectsProjectIdRoute,
74+
}
75+
export const routeTree = rootRouteImport
76+
._addFileChildren(rootRouteChildren)
77+
._addFileTypes<FileRouteTypes>()
78+
79+
import type { getRouter } from './router.tsx'
80+
import type { createStart } from '@tanstack/react-start'
81+
declare module '@tanstack/react-start' {
82+
interface Register {
83+
ssr: true
84+
router: Awaited<ReturnType<typeof getRouter>>
85+
}
86+
}

0 commit comments

Comments
 (0)