docs(plan-5): add superjson transformer to httpBatchLink in both providers

Server uses superjson via core-shared/trpc/init's initTRPC config.
Client httpBatchLink must match or complex types (Date, Map, Set)
silently break on the wire. Caught during execution.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-05 08:48:49 +02:00
parent b14db95cfb
commit cdd7513032

View File

@@ -163,6 +163,7 @@ git commit -m "feat(core-trpc): add typed React tRPC client + getQueryClient"
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";
@@ -177,7 +178,7 @@ export function NextTrpcProvider({
const [queryClient] = useState(() => getQueryClient());
const [trpcClient] = useState(() =>
createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: trpcUrl })],
links: [httpBatchLink({ url: trpcUrl, transformer: superjson })],
}),
);
@@ -191,6 +192,8 @@ export function NextTrpcProvider({
}
```
> Note: `transformer: superjson` is required to match the server's superjson transformer in `core-shared/src/trpc/init.ts`. Without it, complex types like `Date` won't deserialize correctly across the wire.
- [ ] **Step 2: Create `packages/core-trpc/src/providers/tanstack-provider.tsx`**
```tsx
@@ -199,6 +202,7 @@ export function NextTrpcProvider({
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";
@@ -213,7 +217,7 @@ export function TanstackTrpcProvider({
const [queryClient] = useState(() => getQueryClient());
const [trpcClient] = useState(() =>
createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: trpcUrl })],
links: [httpBatchLink({ url: trpcUrl, transformer: superjson })],
}),
);