Next.js Discord

Discord Forum

tRPC + SuperJSON: Data returning with unwanted `json` wrapper

Unanswered
Bighead carp posted this in #help-forum
Open in Discord
Bighead carpOP
Using tRPC with SuperJSON and React Query, all responses are being wrapped in a 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?

0 Replies