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:
@@ -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 })],
|
||||
}),
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user