jntn/zendegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

timeline db and react query

Browse Source
This commit is contained in:
Jonatan Granqvist
2026-02-24 08:24:09 +01:00
parent 622dcdcacd
commit 117d44718e
7 changed files with 96 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/package.json
View File

@@ -17,14 +17,17 @@
"@tanstack/react-form": "^1.23.5",
"@tanstack/react-query": "^5.80.6",
"@tanstack/react-router": "^1.141.1",
"@tanstack/react-router-ssr-query": "^1.162.6",
"@tanstack/react-router-with-query": "^1.130.17",
"@tanstack/react-start": "^1.141.1",
"@tanstack/router-plugin": "^1.141.1",
"@zendegi/auth": "workspace:*",
"@zendegi/db": "workspace:*",
"@zendegi/env": "workspace:*",
"better-auth": "catalog:",
"clsx": "^2.1.1",
"dotenv": "catalog:",
"drizzle-orm": "^0.45.1",
"lucide-react": "^0.525.0",
"next-themes": "^0.4.6",
"react": "19.2.3",

20
apps/web/src/functions/get-timelines.ts Normal file
View File

@@ -0,0 +1,20 @@
import { eq } from "drizzle-orm";
import { db } from "@zendegi/db";
import { createServerFn } from "@tanstack/react-start";
import { timeline } from "@zendegi/db/schema/timeline";
import { queryOptions } from "@tanstack/react-query";
export const getTimelines = createServerFn({ method: "GET" }).handler(
async () => {
return db.query.timeline.findMany({
where: eq(timeline.visibility, "public"),
orderBy: (t, { desc }) => [desc(t.createdAt)],
});
}
);
export const timelinesQueryOptions = () =>
queryOptions({
queryKey: ["timelines"],
queryFn: () => getTimelines(),
});

1
apps/web/src/functions/get-user.ts
View File

@@ -1,5 +1,4 @@
import { createServerFn } from "@tanstack/react-start";
import { authMiddleware } from "@/middleware/auth";
export const getUser = createServerFn({ method: "GET" })

12
apps/web/src/router.tsx
View File

@@ -1,19 +1,29 @@
import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
import { QueryClient } from "@tanstack/react-query";
import Loader from "./components/loader";
import "./index.css";
import { routeTree } from "./routeTree.gen";
export const getRouter = () => {
const queryClient = new QueryClient();
const router = createTanStackRouter({
routeTree,
context: { queryClient },
scrollRestoration: true,
defaultPreloadStaleTime: 0,
context: {},
defaultPendingComponent: () => <Loader />,
defaultNotFoundComponent: () => <div>Not Found</div>,
Wrap: ({ children }) => <>{children}</>,
});
setupRouterSsrQueryIntegration({
router,
queryClient,
});
return router;
};

5
apps/web/src/routes/__root.tsx
View File

@@ -8,9 +8,12 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import Header from "../components/header";
import appCss from "../index.css?url";
import type { QueryClient } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/sonner";
export interface RouterAppContext {}
export interface RouterAppContext {
queryClient: QueryClient;
}
export const Route = createRootRouteWithContext<RouterAppContext>()({
head: () => ({

17
apps/web/src/routes/timelines.tsx
View File

@@ -1,9 +1,24 @@
import { createFileRoute } from "@tanstack/react-router";
import { useSuspenseQuery } from "@tanstack/react-query";
import { timelinesQueryOptions } from "@/functions/get-timelines";
export const Route = createFileRoute("/timelines")({
loader: async ({ context }) => {
await context.queryClient.ensureQueryData(timelinesQueryOptions());
},
component: RouteComponent,
});
function RouteComponent() {
return <div>List of timelines</div>;
const timelinesQuery = useSuspenseQuery(timelinesQueryOptions());
return (
<div>
<h1>List of timelines</h1>
<div>
{timelinesQuery.data.map((t) => (
<div key={t.id}>{t.title}</div>
))}
</div>
</div>
);
}

42
pnpm-lock.yaml generated
View File

@@ -78,6 +78,9 @@ importers:
'@tanstack/react-router':
specifier: ^1.141.1
version: 1.159.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@tanstack/react-router-ssr-query':
specifier: ^1.162.6
version: 1.162.6(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.3))(@tanstack/react-router@1.159.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.159.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@tanstack/react-router-with-query':
specifier: ^1.130.17
version: 1.130.17(@tanstack/react-query@5.90.20(react@19.2.3))(@tanstack/react-router@1.159.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.159.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -90,6 +93,9 @@ importers:
'@zendegi/auth':
specifier: workspace:*
version: link:../../packages/auth
'@zendegi/db':
specifier: workspace:*
version: link:../../packages/db
'@zendegi/env':
specifier: workspace:*
version: link:../../packages/env
@@ -102,6 +108,9 @@ importers:
dotenv:
specifier: 'catalog:'
version: 17.2.4
drizzle-orm:
specifier: ^0.45.1
version: 0.45.1(@types/pg@8.16.0)(kysely@0.28.11)(pg@8.18.0)
lucide-react:
specifier: ^0.525.0
version: 0.525.0(react@19.2.3)
@@ -1538,6 +1547,16 @@ packages:
'@tanstack/router-core':
optional: true
'@tanstack/react-router-ssr-query@1.162.6':
resolution: {integrity: sha512-njTCANKdS5WeQ4mTGugiacTQ5QSqD/GP/El4rYGCIQpiuLuJDV41CAAdhkXmXqzREYjnbBqBOv7W7loijjTpww==}
engines: {node: '>=20.19'}
peerDependencies:
'@tanstack/query-core': '>=5.90.0'
'@tanstack/react-query': '>=5.90.0'
'@tanstack/react-router': '>=1.127.0'
react: '>=18.0.0 || >=19.0.0'
react-dom: '>=18.0.0 || >=19.0.0'
'@tanstack/react-router-with-query@1.130.17':
resolution: {integrity: sha512-TNaSocW20KuPwUojEm130DLWTr9M5hsSzxiu4QqS2jNCnrGLuDrwMHyP+6fq13lG3YuU4u9O1qajxfJIGomZCg==}
engines: {node: '>=12'}
@@ -1622,6 +1641,13 @@ packages:
webpack:
optional: true
'@tanstack/router-ssr-query-core@1.162.6':
resolution: {integrity: sha512-kE1uENrVTubRCJybYUJrHR90Tzxh/tqKX8e6sVnccc694sNB4yNgAMsyxgqhWGUgOux7BZUj5dhoREjaU9XflA==}
engines: {node: '>=20.19'}
peerDependencies:
'@tanstack/query-core': '>=5.90.0'
'@tanstack/router-core': '>=1.127.0'
'@tanstack/router-utils@1.158.0':
resolution: {integrity: sha512-qZ76eaLKU6Ae9iI/mc5zizBX149DXXZkBVVO3/QRIll79uKLJZHQlMKR++2ba7JsciBWz1pgpIBcCJPE9S0LVg==}
engines: {node: '>=12'}
@@ -5574,6 +5600,17 @@ snapshots:
transitivePeerDependencies:
- csstype
'@tanstack/react-router-ssr-query@1.162.6(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.3))(@tanstack/react-router@1.159.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.159.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
dependencies:
'@tanstack/query-core': 5.90.20
'@tanstack/react-query': 5.90.20(react@19.2.3)
'@tanstack/react-router': 1.159.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@tanstack/router-ssr-query-core': 1.162.6(@tanstack/query-core@5.90.20)(@tanstack/router-core@1.159.4)
react: 19.2.3
react-dom: 19.2.3(react@19.2.3)
transitivePeerDependencies:
- '@tanstack/router-core'
'@tanstack/react-router-with-query@1.130.17(@tanstack/react-query@5.90.20(react@19.2.3))(@tanstack/react-router@1.159.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.159.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
dependencies:
'@tanstack/react-query': 5.90.20(react@19.2.3)
@@ -5695,6 +5732,11 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@tanstack/router-ssr-query-core@1.162.6(@tanstack/query-core@5.90.20)(@tanstack/router-core@1.159.4)':
dependencies:
'@tanstack/query-core': 5.90.20
'@tanstack/router-core': 1.159.4
'@tanstack/router-utils@1.158.0':
dependencies:
'@babel/core': 7.29.0