this repo has no description
proper suspense
+75
-68
+75
-68
src/routes/suspense.tsx
+75
-68
src/routes/suspense.tsx
···
1
-
import { useQuery } from "@tanstack/react-query";
1
+
import { useSuspenseQuery } from "@tanstack/react-query";
2
2
import { Link, createFileRoute } from "@tanstack/react-router";
3
3
import { buttonVariants } from "~/components/ui/button";
4
4
···
26
26
export const Route = createFileRoute("/suspense")({
27
27
validateSearch: searchParamsSchema,
28
28
component: RouteComponent,
29
+
notFoundComponent: NotFoundComponent,
30
+
errorComponent: ErrorComponent,
31
+
pendingComponent: LoadingComponent,
29
32
});
30
33
31
34
interface PokemonListResult {
···
33
36
url: string;
34
37
}
35
38
39
+
function NotFoundComponent() {
40
+
return <div>Not Found</div>;
41
+
}
42
+
43
+
function ErrorComponent() {
44
+
return <div>Error</div>;
45
+
}
46
+
47
+
function LoadingComponent() {
48
+
return <div>Loading...</div>;
49
+
}
50
+
36
51
function RouteComponent() {
37
52
const { offset: currentOffset } = Route.useSearch();
38
53
···
42
57
{ limit: POKEMON_LIMIT, offset: currentOffset },
43
58
] as const;
44
59
45
-
const { data, error } = useQuery({
60
+
const { data } = useSuspenseQuery({
46
61
queryKey: newKey,
47
62
queryFn: async () => {
48
63
const { data, error } = await $pokeFetchClient.GET("/api/v2/pokemon/", {
···
78
93
return new URL(data.next).searchParams.get("offset") ?? null;
79
94
}, [data?.next]);
80
95
81
-
if (data) {
82
-
const results = data.results ?? [];
83
-
return (
84
-
<div className="p-4">
85
-
<h1 className="text-2xl font-bold mb-4">
86
-
National Pokédex: Pokémon {currentOffset + 1}-
87
-
{currentOffset + POKEMON_LIMIT}
88
-
</h1>
89
-
<Table>
90
-
<TableHeader>
91
-
<TableRow>
92
-
<TableHead>#</TableHead>
93
-
<TableHead>Name</TableHead>
94
-
<TableHead>Details</TableHead>
96
+
const results = data.results ?? [];
97
+
return (
98
+
<div className="p-4">
99
+
<h1 className="text-2xl font-bold mb-4">
100
+
National Pokédex: Pokémon {currentOffset + 1}-
101
+
{currentOffset + POKEMON_LIMIT}
102
+
</h1>
103
+
<Table>
104
+
<TableHeader>
105
+
<TableRow>
106
+
<TableHead>#</TableHead>
107
+
<TableHead>Name</TableHead>
108
+
<TableHead>Details</TableHead>
109
+
</TableRow>
110
+
</TableHeader>
111
+
<TableBody>
112
+
{results.map((pokemon: PokemonListResult) => (
113
+
<TableRow key={pokemon.name}>
114
+
<TableCell>{pokemon.url.match(matchPokemonIdExp)?.[1]}</TableCell>
115
+
<TableCell className="capitalize">{pokemon.name}</TableCell>
116
+
<TableCell>
117
+
<a
118
+
href={pokemon.url}
119
+
target="_blank"
120
+
rel="noopener noreferrer"
121
+
className="text-blue-600 underline"
122
+
>
123
+
View
124
+
</a>
125
+
</TableCell>
95
126
</TableRow>
96
-
</TableHeader>
97
-
<TableBody>
98
-
{results.map((pokemon: PokemonListResult) => (
99
-
<TableRow key={pokemon.name}>
100
-
<TableCell>
101
-
{pokemon.url.match(matchPokemonIdExp)?.[1]}
102
-
</TableCell>
103
-
<TableCell className="capitalize">{pokemon.name}</TableCell>
104
-
<TableCell>
105
-
<a
106
-
href={pokemon.url}
107
-
target="_blank"
108
-
rel="noopener noreferrer"
109
-
className="text-blue-600 underline"
110
-
>
111
-
View
112
-
</a>
113
-
</TableCell>
114
-
</TableRow>
115
-
))}
116
-
</TableBody>
117
-
</Table>
118
-
<div className="flex justify-center gap-4 mt-4">
119
-
<Link
120
-
to="/basic"
121
-
className={buttonVariants({
122
-
variant: "outline",
123
-
className: cn(!previousOffset && "opacity-50 cursor-not-allowed"),
124
-
})}
125
-
search={{ offset: Number(previousOffset) }}
126
-
disabled={!previousOffset}
127
-
>
128
-
Previous
129
-
</Link>
130
-
<Link
131
-
to="/basic"
132
-
search={{ offset: Number(nextOffset) }}
133
-
className={buttonVariants({
134
-
variant: "outline",
135
-
className: cn(!nextOffset && "opacity-50 cursor-not-allowed"),
136
-
})}
137
-
disabled={!nextOffset}
138
-
>
139
-
Next
140
-
</Link>
141
-
</div>
127
+
))}
128
+
</TableBody>
129
+
</Table>
130
+
<div className="flex justify-center gap-4 mt-4">
131
+
<Link
132
+
to="/suspense"
133
+
className={buttonVariants({
134
+
variant: "outline",
135
+
className: cn(!previousOffset && "opacity-50 cursor-not-allowed"),
136
+
})}
137
+
search={{ offset: Number(previousOffset) }}
138
+
disabled={!previousOffset}
139
+
>
140
+
Previous
141
+
</Link>
142
+
<Link
143
+
to="/suspense"
144
+
search={{ offset: Number(nextOffset) }}
145
+
className={buttonVariants({
146
+
variant: "outline",
147
+
className: cn(!nextOffset && "opacity-50 cursor-not-allowed"),
148
+
})}
149
+
disabled={!nextOffset}
150
+
>
151
+
Next
152
+
</Link>
142
153
</div>
143
-
);
144
-
}
145
-
146
-
if (error) return <div>Error loading Pokémon.</div>;
147
-
148
-
return <div>No data</div>;
154
+
</div>
155
+
);
149
156
}