Initial commit

packages/core-trpc/src/client.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { useTRPC, TRPCProvider } from "./client";
+
+describe("core-trpc client exports", () => {
+  it("exports useTRPC hook", () => {
+    expect(useTRPC).toBeTypeOf("function");
+  });
+
+  it("exports TRPCProvider component", () => {
+    expect(TRPCProvider).toBeTypeOf("function");
+  });
+});

packages/core-trpc/src/client.ts

@@ -0,0 +1,6 @@
+"use client";
+
+import { createTRPCContext } from "@trpc/tanstack-react-query";
+import type { AppRouter } from "@repo/core-api";
+
+export const { TRPCProvider, useTRPC } = createTRPCContext<AppRouter>();

packages/core-trpc/src/index.ts

@@ -0,0 +1,3 @@
+export { useTRPC, TRPCProvider } from "./client";
+export { getQueryClient } from "./query-client";
+export type { AppRouter } from "@repo/core-api";

packages/core-trpc/src/providers/next-provider.tsx

@@ -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>
+  );
+}

packages/core-trpc/src/providers/tanstack-provider.tsx

@@ -0,0 +1,30 @@
+"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";
+
+export function TanstackTrpcProvider({
+  children,
+  trpcUrl,
+}: {
+  children: React.ReactNode;
+  trpcUrl: string;
+}) {
+  const [queryClient] = useState(() => getQueryClient());
+  const [trpcClient] = useState(() =>
+    createTRPCClient<AppRouter>({
+      links: [httpBatchLink({ url: trpcUrl, transformer: superjson })],
+    }),
+  );
+
+  return (
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </TRPCProvider>
+  );
+}

packages/core-trpc/src/query-client.ts

@@ -0,0 +1,22 @@
+import { QueryClient } from "@tanstack/react-query";
+
+let clientQueryClient: QueryClient | undefined;
+
+const defaultOptions = {
+  queries: {
+    staleTime: 30 * 1000,
+    refetchOnWindowFocus: false,
+  },
+};
+
+export function getQueryClient(): QueryClient {
+  if (typeof window === "undefined") {
+    // Server: always create a new instance per request
+    return new QueryClient({ defaultOptions });
+  }
+  // Browser: singleton
+  if (!clientQueryClient) {
+    clientQueryClient = new QueryClient({ defaultOptions });
+  }
+  return clientQueryClient;
+}