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:
40
packages/core-trpc/src/providers/next-provider.tsx
Normal file
40
packages/core-trpc/src/providers/next-provider.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user