vt/solid-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ConnectRPC: Initialize buf workspace, generate ts files, use using connect-query
Some checks failed
Build and Push Docker Image / build (push) Failing after 4m20s
Details

Browse Source
This commit is contained in:
Konstantin Hintermayer
2026-06-03 13:24:17 +02:00
parent 30a52c800a
commit 5519c016aa
16 changed files with 6382 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/__root.tsx
View File

@@ -6,6 +6,8 @@ import {
} from "@tanstack/solid-router";
import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
import { QueryClientProvider, QueryClient } from "@tanstack/solid-query";
import type { Transport } from "@connectrpc/connect";
import { TransportProvider } from "~/integrations/connect-query/solid";
import "@fontsource/inter/400.css";
@@ -18,6 +20,7 @@ import { ThemeProvider } from "~/components/theme-provider";
export interface MyRouterContext {
queryClient: QueryClient;
transport: Transport;
}
export function ErrorComponent({ error }: { error: Error }) {
@@ -35,6 +38,7 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
function RootComponent() {
const context = Route.useRouteContext();
console.log("Root context:", context());
return (
<html>
<head>
@@ -43,14 +47,16 @@ function RootComponent() {
</head>
<body>
<QueryClientProvider client={context().queryClient}>
<Suspense>
<ThemeProvider>
<Header />
<Outlet />
</ThemeProvider>
<TransportProvider transport={context().transport}>
<Suspense>
<ThemeProvider>
<Header />
<Outlet />
</ThemeProvider>
<TanStackRouterDevtools />
</Suspense>
<TanStackRouterDevtools />
</Suspense>
</TransportProvider>
</QueryClientProvider>
<Scripts />
</body>

30
src/routes/shorten.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { useConnectQuery } from "~/integrations/connect-query/solid";
import { createFileRoute } from "@tanstack/solid-router";
import { listURLRedirections } from "~/gen/proto/shorten/v1/shorten-ShortenService_connectquery";
import { For, Match, Switch } from "solid-js";
export const Route = createFileRoute("/shorten")({
component: RouteComponent,
});
function RouteComponent() {
const query = useConnectQuery(listURLRedirections, {});
return (
<div>
<Switch fallback={<div>Loading...</div>}>
<Match when={query.isError}>
<div>Error: {query.error?.message}</div>
</Match>
<Match when={query.isLoading}>
<div>Loading...</div>
</Match>
<Match when={query.data}>
<For each={query.data?.urlRedirections}>
{(item) => <div>{item.url}</div>}
</For>
</Match>
</Switch>
</div>
);
}