From cdd7513032adff09e327df21633f451b397a996b Mon Sep 17 00:00:00 2001
From: Danijel Martinek <danijel@fraqtal.xyz>
Date: Tue, 5 May 2026 08:48:49 +0200
Subject: [PATCH] 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>
---
 .../plans/2026-05-04-plan-5-app-ui-integration.md         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/superpowers/plans/2026-05-04-plan-5-app-ui-integration.md b/docs/superpowers/plans/2026-05-04-plan-5-app-ui-integration.md
index 91056d4..639dd09 100644
--- a/docs/superpowers/plans/2026-05-04-plan-5-app-ui-integration.md
+++ b/docs/superpowers/plans/2026-05-04-plan-5-app-ui-integration.md
@@ -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 })],
     }),
   );