ConnectRPC: Initialize buf workspace, generate ts files, use using connect-query

2026-06-03 13:24:17 +02:00
parent 30a52c800a
commit 5519c016aa
16 changed files with 6382 additions and 402 deletions
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -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>