tRPC + SuperJSON: Data returning with unwanted `json` wrapper
Unanswered
Bighead carp posted this in #help-forum
Bighead carpOP
Using tRPC with SuperJSON and React Query, all responses are being wrapped in a
### Current Behavior
### Setup
### Dependencies
How can I prevent SuperJSON from adding this
json
property.### Current Behavior
// What I'm getting:
{
"json": {
"data": [/* ... */],
"meta": { /* ... */ }
}
}
// What I expect:
{
"data": [/* ... */],
"meta": { /* ... */ }
}
### Setup
// 1. Server (trpc/init.ts)
const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
});
// 2. Client (trpc/client.tsx)
createTRPCClient<AppRouter>({
links: [
httpBatchLink({
url: `${getUrl()}/api/trpc`,
transformer: superjson,
}),
],
});
// 3. Query Client (trpc/query-client.ts)
export function makeQueryClient() {
return new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000,
},
dehydrate: {
serializeData: superjson.serialize,
shouldDehydrateQuery: (query) =>
defaultShouldDehydrateQuery(query) ||
query.state.status === "pending",
},
hydrate: {
deserializeData: superjson.deserialize,
},
},
});
}
### Dependencies
{
"@trpc/client": "^11.1.2",
"@trpc/server": "^11.1.2",
"@trpc/tanstack-react-query": "^11.1.2",
"@tanstack/react-query": "^5.72.1",
"superjson": "^2.2.2",
"next": "15.4.0-canary.15"
}
How can I prevent SuperJSON from adding this
json
wrapper while maintaining type safety?