this repo has no description
merge basic over suspense
+63
-211
+2
-42
src/routeTree.gen.ts
+2
-42
src/routeTree.gen.ts
···
13
13
// Import Routes
14
14
15
15
import { Route as rootRoute } from './routes/__root'
16
-
import { Route as SuspenseRouteImport } from './routes/suspense'
17
16
import { Route as PreloadingRouteImport } from './routes/preloading'
18
17
import { Route as PaginationRouteImport } from './routes/pagination'
19
18
import { Route as IntentPreloadingRouteImport } from './routes/intent-preloading'
···
21
20
import { Route as IndexRouteImport } from './routes/index'
22
21
23
22
// Create/Update Routes
24
-
25
-
const SuspenseRoute = SuspenseRouteImport.update({
26
-
id: '/suspense',
27
-
path: '/suspense',
28
-
getParentRoute: () => rootRoute,
29
-
} as any)
30
23
31
24
const PreloadingRoute = PreloadingRouteImport.update({
32
25
id: '/preloading',
···
97
90
preLoaderRoute: typeof PreloadingRouteImport
98
91
parentRoute: typeof rootRoute
99
92
}
100
-
'/suspense': {
101
-
id: '/suspense'
102
-
path: '/suspense'
103
-
fullPath: '/suspense'
104
-
preLoaderRoute: typeof SuspenseRouteImport
105
-
parentRoute: typeof rootRoute
106
-
}
107
93
}
108
94
}
109
95
···
154
140
FileRoutesByPath['/preloading']['fullPath']
155
141
>
156
142
}
157
-
declare module './routes/suspense' {
158
-
const createFileRoute: CreateFileRoute<
159
-
'/suspense',
160
-
FileRoutesByPath['/suspense']['parentRoute'],
161
-
FileRoutesByPath['/suspense']['id'],
162
-
FileRoutesByPath['/suspense']['path'],
163
-
FileRoutesByPath['/suspense']['fullPath']
164
-
>
165
-
}
166
143
167
144
// Create and export the route tree
168
145
···
172
149
'/intent-preloading': typeof IntentPreloadingRoute
173
150
'/pagination': typeof PaginationRoute
174
151
'/preloading': typeof PreloadingRoute
175
-
'/suspense': typeof SuspenseRoute
176
152
}
177
153
178
154
export interface FileRoutesByTo {
···
181
157
'/intent-preloading': typeof IntentPreloadingRoute
182
158
'/pagination': typeof PaginationRoute
183
159
'/preloading': typeof PreloadingRoute
184
-
'/suspense': typeof SuspenseRoute
185
160
}
186
161
187
162
export interface FileRoutesById {
···
191
166
'/intent-preloading': typeof IntentPreloadingRoute
192
167
'/pagination': typeof PaginationRoute
193
168
'/preloading': typeof PreloadingRoute
194
-
'/suspense': typeof SuspenseRoute
195
169
}
196
170
197
171
export interface FileRouteTypes {
···
202
176
| '/intent-preloading'
203
177
| '/pagination'
204
178
| '/preloading'
205
-
| '/suspense'
206
179
fileRoutesByTo: FileRoutesByTo
207
-
to:
208
-
| '/'
209
-
| '/basic'
210
-
| '/intent-preloading'
211
-
| '/pagination'
212
-
| '/preloading'
213
-
| '/suspense'
180
+
to: '/' | '/basic' | '/intent-preloading' | '/pagination' | '/preloading'
214
181
id:
215
182
| '__root__'
216
183
| '/'
···
218
185
| '/intent-preloading'
219
186
| '/pagination'
220
187
| '/preloading'
221
-
| '/suspense'
222
188
fileRoutesById: FileRoutesById
223
189
}
224
190
···
228
194
IntentPreloadingRoute: typeof IntentPreloadingRoute
229
195
PaginationRoute: typeof PaginationRoute
230
196
PreloadingRoute: typeof PreloadingRoute
231
-
SuspenseRoute: typeof SuspenseRoute
232
197
}
233
198
234
199
const rootRouteChildren: RootRouteChildren = {
···
237
202
IntentPreloadingRoute: IntentPreloadingRoute,
238
203
PaginationRoute: PaginationRoute,
239
204
PreloadingRoute: PreloadingRoute,
240
-
SuspenseRoute: SuspenseRoute,
241
205
}
242
206
243
207
export const routeTree = rootRoute
···
254
218
"/basic",
255
219
"/intent-preloading",
256
220
"/pagination",
257
-
"/preloading",
258
-
"/suspense"
221
+
"/preloading"
259
222
]
260
223
},
261
224
"/": {
···
272
235
},
273
236
"/preloading": {
274
237
"filePath": "preloading.tsx"
275
-
},
276
-
"/suspense": {
277
-
"filePath": "suspense.tsx"
278
238
}
279
239
}
280
240
}
+61
-70
src/routes/basic.tsx
+61
-70
src/routes/basic.tsx
···
1
-
import { useQuery } from "@tanstack/react-query";
1
+
import { useSuspenseQuery } from "@tanstack/react-query";
2
2
import { Link } from "@tanstack/react-router";
3
3
import { buttonVariants } from "~/components/ui/button";
4
4
···
31
31
function RouteComponent() {
32
32
const { offset: currentOffset } = Route.useSearch();
33
33
const getPokemonListQueryFn = useServerFn(getServerPokemonListQueryFn);
34
-
const { data, error } = useQuery({
35
-
queryKey: getPokemonListQueryKey("basic", currentOffset),
34
+
35
+
const { data } = useSuspenseQuery({
36
+
queryKey: getPokemonListQueryKey("suspense", currentOffset),
36
37
queryFn: getPokemonListQueryFn,
37
38
});
38
39
39
-
if (data) {
40
-
return (
41
-
<div className="p-4">
42
-
<h1 className="text-2xl font-bold mb-4">
43
-
National Pokédex: Pokémon {currentOffset + 1}-
44
-
{currentOffset + POKEMON_LIMIT}
45
-
</h1>
46
-
<Table>
47
-
<TableHeader>
48
-
<TableRow>
49
-
<TableHead>#</TableHead>
50
-
<TableHead>Name</TableHead>
51
-
<TableHead>Details</TableHead>
40
+
return (
41
+
<div className="p-4">
42
+
<h1 className="text-2xl font-bold mb-4">
43
+
National Pokédex: Pokémon {currentOffset + 1}-
44
+
{currentOffset + POKEMON_LIMIT}
45
+
</h1>
46
+
<Table>
47
+
<TableHeader>
48
+
<TableRow>
49
+
<TableHead>#</TableHead>
50
+
<TableHead>Name</TableHead>
51
+
<TableHead>Details</TableHead>
52
+
</TableRow>
53
+
</TableHeader>
54
+
<TableBody>
55
+
{data.pokemon.map((pokemon) => (
56
+
<TableRow key={pokemon.name}>
57
+
<TableCell>{pokemon.id}</TableCell>
58
+
<TableCell className="capitalize">{pokemon.name}</TableCell>
59
+
<TableCell>
60
+
{pokemon.types.map((type) => (
61
+
<span
62
+
key={type.type.name}
63
+
className="inline-block px-2 py-1 mr-1 text-sm font-medium rounded-full bg-gray-100"
64
+
>
65
+
{type.type.name}
66
+
</span>
67
+
))}
68
+
</TableCell>
52
69
</TableRow>
53
-
</TableHeader>
54
-
<TableBody>
55
-
{data.pokemon.map((pokemon) => (
56
-
<TableRow key={pokemon.name}>
57
-
<TableCell>{pokemon.id}</TableCell>
58
-
<TableCell className="capitalize">{pokemon.name}</TableCell>
59
-
<TableCell>
60
-
{pokemon.types.map((type) => (
61
-
<span
62
-
key={type.type.name}
63
-
className="inline-block px-2 py-1 mr-1 text-sm font-medium rounded-full bg-gray-100"
64
-
>
65
-
{type.type.name}
66
-
</span>
67
-
))}
68
-
</TableCell>
69
-
</TableRow>
70
-
))}
71
-
</TableBody>
72
-
</Table>
73
-
<div className="flex justify-center gap-4 mt-4">
74
-
<Link
75
-
to="/basic"
76
-
className={buttonVariants({
77
-
variant: "outline",
78
-
className: cn(
79
-
!data.prevOffset && "opacity-50 cursor-not-allowed",
80
-
),
81
-
})}
82
-
search={{ offset: Number(data.prevOffset) }}
83
-
disabled={!data.prevOffset}
84
-
>
85
-
Previous
86
-
</Link>
87
-
<Link
88
-
to="/basic"
89
-
search={{ offset: Number(data.nextOffset) }}
90
-
className={buttonVariants({
91
-
variant: "outline",
92
-
className: cn(
93
-
!data.nextOffset && "opacity-50 cursor-not-allowed",
94
-
),
95
-
})}
96
-
disabled={!data.nextOffset}
97
-
>
98
-
Next
99
-
</Link>
100
-
</div>
70
+
))}
71
+
</TableBody>
72
+
</Table>
73
+
<div className="flex justify-center gap-4 mt-4">
74
+
<Link
75
+
to="/basic"
76
+
className={buttonVariants({
77
+
variant: "outline",
78
+
className: cn(!data.prevOffset && "opacity-50 cursor-not-allowed"),
79
+
})}
80
+
search={{ offset: Number(data.prevOffset) }}
81
+
disabled={!data.prevOffset}
82
+
>
83
+
Previous
84
+
</Link>
85
+
<Link
86
+
to="/basic"
87
+
search={{ offset: Number(data.nextOffset) }}
88
+
className={buttonVariants({
89
+
variant: "outline",
90
+
className: cn(!data.nextOffset && "opacity-50 cursor-not-allowed"),
91
+
})}
92
+
disabled={!data.nextOffset}
93
+
>
94
+
Next
95
+
</Link>
101
96
</div>
102
-
);
103
-
}
104
-
105
-
if (error) return <div>Error loading Pokémon.</div>;
106
-
107
-
return <div>No data</div>;
97
+
</div>
98
+
);
108
99
}
-99
src/routes/suspense.tsx
-99
src/routes/suspense.tsx
···
1
-
import { useSuspenseQuery } from "@tanstack/react-query";
2
-
import { Link } from "@tanstack/react-router";
3
-
import { buttonVariants } from "~/components/ui/button";
4
-
5
-
import { useServerFn } from "@tanstack/react-start";
6
-
import * as v from "valibot";
7
-
import {
8
-
Table,
9
-
TableBody,
10
-
TableCell,
11
-
TableHead,
12
-
TableHeader,
13
-
TableRow,
14
-
} from "~/components/ui/table";
15
-
import { cn } from "~/lib/utils";
16
-
import {
17
-
POKEMON_LIMIT,
18
-
getPokemonListQueryKey,
19
-
getServerPokemonListQueryFn,
20
-
} from "~/util/pokemon";
21
-
22
-
const searchParamsSchema = v.object({
23
-
offset: v.optional(v.number(), 0),
24
-
});
25
-
26
-
export const Route = createFileRoute({
27
-
validateSearch: searchParamsSchema,
28
-
component: RouteComponent,
29
-
});
30
-
31
-
function RouteComponent() {
32
-
const { offset: currentOffset } = Route.useSearch();
33
-
const getPokemonListQueryFn = useServerFn(getServerPokemonListQueryFn);
34
-
35
-
const { data } = useSuspenseQuery({
36
-
queryKey: getPokemonListQueryKey("suspense", currentOffset),
37
-
queryFn: getPokemonListQueryFn,
38
-
});
39
-
40
-
return (
41
-
<div className="p-4">
42
-
<h1 className="text-2xl font-bold mb-4">
43
-
National Pokédex: Pokémon {currentOffset + 1}-
44
-
{currentOffset + POKEMON_LIMIT}
45
-
</h1>
46
-
<Table>
47
-
<TableHeader>
48
-
<TableRow>
49
-
<TableHead>#</TableHead>
50
-
<TableHead>Name</TableHead>
51
-
<TableHead>Details</TableHead>
52
-
</TableRow>
53
-
</TableHeader>
54
-
<TableBody>
55
-
{data.pokemon.map((pokemon) => (
56
-
<TableRow key={pokemon.name}>
57
-
<TableCell>{pokemon.id}</TableCell>
58
-
<TableCell className="capitalize">{pokemon.name}</TableCell>
59
-
<TableCell>
60
-
{pokemon.types.map((type) => (
61
-
<span
62
-
key={type.type.name}
63
-
className="inline-block px-2 py-1 mr-1 text-sm font-medium rounded-full bg-gray-100"
64
-
>
65
-
{type.type.name}
66
-
</span>
67
-
))}
68
-
</TableCell>
69
-
</TableRow>
70
-
))}
71
-
</TableBody>
72
-
</Table>
73
-
<div className="flex justify-center gap-4 mt-4">
74
-
<Link
75
-
to="/suspense"
76
-
className={buttonVariants({
77
-
variant: "outline",
78
-
className: cn(!data.prevOffset && "opacity-50 cursor-not-allowed"),
79
-
})}
80
-
search={{ offset: Number(data.prevOffset) }}
81
-
disabled={!data.prevOffset}
82
-
>
83
-
Previous
84
-
</Link>
85
-
<Link
86
-
to="/suspense"
87
-
search={{ offset: Number(data.nextOffset) }}
88
-
className={buttonVariants({
89
-
variant: "outline",
90
-
className: cn(!data.nextOffset && "opacity-50 cursor-not-allowed"),
91
-
})}
92
-
disabled={!data.nextOffset}
93
-
>
94
-
Next
95
-
</Link>
96
-
</div>
97
-
</div>
98
-
);
99
-
}