feat(core-trpc): scaffold tRPC client with React Query providers

- createTRPCContext + useTRPC hook for typed client access
- NextTrpcProvider with SSR-safe absolute URL resolution
- TanstackTrpcProvider for TanStack Start apps
- /api/trpc catch-all route handler in web-next
- Wire NextTrpcProvider into app providers
- Add @repo/core-trpc to transpilePackages
This commit is contained in:
danijel-lf
2026-05-26 14:11:27 +02:00
parent bca04f4cef
commit 3ce71447b3
18 changed files with 824 additions and 13 deletions

View File

@@ -0,0 +1,40 @@
"use client";
import { useState } from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import superjson from "superjson";
import type { AppRouter } from "@repo/core-api";
import { TRPCProvider } from "../client";
import { getQueryClient } from "../query-client";
function getBaseUrl() {
if (typeof window !== "undefined") return "";
return `http://localhost:${process.env.PORT ?? 3000}`;
}
export function NextTrpcProvider({
children,
trpcUrl = "/api/trpc",
}: {
children: React.ReactNode;
trpcUrl?: string;
}) {
const [queryClient] = useState(() => getQueryClient());
const [trpcClient] = useState(() =>
createTRPCClient<AppRouter>({
links: [
httpBatchLink({
url: `${getBaseUrl()}${trpcUrl}`,
transformer: superjson,
}),
],
}),
);
return (
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</TRPCProvider>
);
}