Skip to content

Commit b98791b

Browse files
frectonzfrectonz
committed
fix: use zod-fetch 
1 parent 1311c3f commit b98791b

5 files changed

Lines changed: 72 additions & 70 deletions

File tree

‎ui/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
"format": "prettier -w ."
1212
},
1313
"dependencies": {
14-
"@better-fetch/fetch": "file:/home/frectonz/workspace/better-fetch",
1514
"@radix-ui/react-dialog": "^1.0.5",
1615
"@radix-ui/react-slot": "^1.0.2",
1716
"@radix-ui/react-tabs": "^1.0.4",
@@ -25,7 +24,8 @@
2524
"recharts": "^2.12.7",
2625
"tailwind-merge": "^2.3.0",
2726
"tailwindcss-animate": "^1.0.7",
28-
"zod": "^3.23.8"
27+
"zod": "^3.23.8",
28+
"zod-fetch": "^0.1.1"
2929
},
3030
"devDependencies": {
3131
"@tanstack/router-devtools": "^1.35.3",

‎ui/pnpm-lock.yaml‎

Lines changed: 10 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/src/api.ts‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,46 @@
11
import { z } from "zod";
2-
import { createFetch } from "@better-fetch/fetch";
3-
import type { FetchSchema } from "@better-fetch/fetch/typed";
2+
import { createZodFetcher } from "zod-fetch";
43

5-
const routes = {
6-
"/": {
7-
output: z.object({
8-
file_name: z.string(),
9-
sqlite_version: z.string(),
10-
file_size: z.string(),
11-
created: z
12-
.string()
13-
.datetime()
14-
.transform((x) => new Date(x)),
15-
modified: z
16-
.string()
17-
.datetime()
18-
.transform((x) => new Date(x)),
19-
tables: z.number(),
20-
indexes: z.number(),
21-
triggers: z.number(),
22-
views: z.number(),
23-
counts: z.array(
24-
z.object({
25-
name: z.string(),
26-
count: z.number(),
27-
}),
28-
),
29-
}),
30-
},
31-
"/tables": {
32-
output: z.object({
33-
names: z.array(z.string()),
4+
const BASE_URL = "http://localhost:3030/api";
5+
6+
const overview = z.object({
7+
file_name: z.string(),
8+
sqlite_version: z.string(),
9+
file_size: z.string(),
10+
created: z
11+
.string()
12+
.datetime()
13+
.transform((x) => new Date(x)),
14+
modified: z
15+
.string()
16+
.datetime()
17+
.transform((x) => new Date(x)),
18+
tables: z.number(),
19+
indexes: z.number(),
20+
triggers: z.number(),
21+
views: z.number(),
22+
counts: z.array(
23+
z.object({
24+
name: z.string(),
25+
count: z.number(),
3426
}),
35-
},
36-
} satisfies FetchSchema;
27+
),
28+
});
29+
30+
const tables = z.object({
31+
names: z.array(z.string()),
32+
});
33+
34+
const table = z.object({
35+
name: z.string(),
36+
sql: z.string(),
37+
columns: z.array(z.string()),
38+
rows: z.array(z.array(z.any())),
39+
});
40+
41+
const $fetch = createZodFetcher();
3742

38-
export const $fetch = createFetch(
39-
{
40-
baseURL: "http://localhost:3030/api",
41-
throw: true,
42-
},
43-
routes,
44-
);
43+
export const fetchOverview = () => $fetch(overview, `${BASE_URL}/`);
44+
export const fetchTables = () => $fetch(tables, `${BASE_URL}/tables`);
45+
export const fetchTable = (name: string) =>
46+
$fetch(table, `${BASE_URL}/tables/${name}`);

‎ui/src/routes/index.lazy.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
88
import { createFileRoute } from "@tanstack/react-router";
99

10-
import { $fetch } from "@/api";
10+
import { fetchOverview } from "@/api";
1111
import {
1212
Card,
1313
CardContent,
@@ -19,17 +19,17 @@ import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
1919

2020
export const Route = createFileRoute("/")({
2121
component: Index,
22-
loader: () => $fetch("/"),
22+
loader: () => fetchOverview(),
2323
errorComponent: () => <h1>Error</h1>,
2424
});
2525

2626
function Index() {
27-
const { data } = Route.useLoaderData();
27+
const data = Route.useLoaderData();
2828

2929
return (
3030
<>
3131
<h2 className="scroll-m-20 border-b pb-2 text-3xl tracking-tight first:mt-0">
32-
Exploring <span className="font-bold">{data?.file_name}</span>
32+
Exploring <span className="font-bold">{data.file_name}</span>
3333
</h2>
3434

3535
<div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
@@ -39,7 +39,7 @@ function Index() {
3939
<TableIcon className="h-4 w-4 text-muted-foreground" />
4040
</CardHeader>
4141
<CardContent>
42-
<div className="text-2xl font-bold">{data?.tables}</div>
42+
<div className="text-2xl font-bold">{data.tables}</div>
4343
<p className="text-xs text-muted-foreground">
4444
The number of tables in the DB.
4545
</p>
@@ -51,7 +51,7 @@ function Index() {
5151
<DatabaseZap className="h-4 w-4 text-muted-foreground" />
5252
</CardHeader>
5353
<CardContent>
54-
<div className="text-2xl font-bold">{data?.indexes}</div>
54+
<div className="text-2xl font-bold">{data.indexes}</div>
5555
<p className="text-xs text-muted-foreground">
5656
The number of indexes across the whole DB.
5757
</p>
@@ -63,7 +63,7 @@ function Index() {
6363
<TextSearch className="h-4 w-4 text-muted-foreground" />
6464
</CardHeader>
6565
<CardContent>
66-
<div className="text-2xl font-bold">{data?.views}</div>
66+
<div className="text-2xl font-bold">{data.views}</div>
6767
<p className="text-xs text-muted-foreground">
6868
The number of views in the DB.
6969
</p>
@@ -75,7 +75,7 @@ function Index() {
7575
<Workflow className="h-4 w-4 text-muted-foreground" />
7676
</CardHeader>
7777
<CardContent>
78-
<div className="text-2xl font-bold">{data?.triggers}</div>
78+
<div className="text-2xl font-bold">{data.triggers}</div>
7979
<p className="text-xs text-muted-foreground">
8080
The number of triggers in the DB.
8181
</p>
@@ -89,7 +89,7 @@ function Index() {
8989
<CardTitle>Rows Per Table</CardTitle>
9090
</CardHeader>
9191
<CardContent className="pl-2">
92-
<TheBarChart counts={data?.counts ?? []} />
92+
<TheBarChart counts={data.counts} />
9393
</CardContent>
9494
</Card>
9595
<Card className="xl:col-span-3">
@@ -109,9 +109,7 @@ function Index() {
109109
The size of the DB on disk.
110110
</div>
111111
</TableCell>
112-
<TableCell className="text-right">
113-
{data?.file_size}
114-
</TableCell>
112+
<TableCell className="text-right">{data.file_size}</TableCell>
115113
</TableRow>
116114

117115
<TableRow>
@@ -122,7 +120,7 @@ function Index() {
122120
</div>
123121
</TableCell>
124122
<TableCell className="text-right">
125-
{data?.sqlite_version}
123+
{data.sqlite_version}
126124
</TableCell>
127125
</TableRow>
128126

@@ -134,7 +132,7 @@ function Index() {
134132
</div>
135133
</TableCell>
136134
<TableCell className="text-right">
137-
{data?.created.toUTCString()}
135+
{data.created.toUTCString()}
138136
</TableCell>
139137
</TableRow>
140138

@@ -146,7 +144,7 @@ function Index() {
146144
</div>
147145
</TableCell>
148146
<TableCell className="text-right">
149-
{data?.modified.toUTCString()}
147+
{data.modified.toUTCString()}
150148
</TableCell>
151149
</TableRow>
152150
</TableBody>

‎ui/src/routes/tables.lazy.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { createFileRoute } from "@tanstack/react-router";
22

3-
import { $fetch } from "@/api";
3+
import { fetchTables } from "@/api";
44
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
55

66
export const Route = createFileRoute("/tables")({
77
component: Tables,
8-
loader: () => $fetch("/tables"),
8+
loader: () => fetchTables(),
99
});
1010

1111
function Tables() {
12-
const { data } = Route.useLoaderData();
13-
data?.names.sort();
12+
const data = Route.useLoaderData();
13+
data.names.sort();
1414

1515
return (
1616
<Tabs defaultValue="0" className="p-2 w-full overflow-x-scroll">
1717
<TabsList>
18-
{data?.names.map((n, i) => (
18+
{data.names.map((n, i) => (
1919
<TabsTrigger key={i} value={i.toString()}>
2020
{n}
2121
</TabsTrigger>

0 commit comments

Comments
 (0)