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({ - 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({ - links: [httpBatchLink({ url: trpcUrl })], + links: [httpBatchLink({ url: trpcUrl, transformer: superjson })], }), );