Playground returns undefined in UI but 200 in network dev tools tab

[webcicle]

First time using the library and hooked it up with Express. When I run a query in the UI, it only returns 'undefined', but if I go to the network tab and check the request, the data has been returned from the server there. But for some reason, it's not showing up in the UI. No errors in the console.

Has anyone got an idea why?

I'm using express: ^4.18.2, trpc/server: 10.13.2 and trpc-playground: ^1.0.4

[MatsDK]

One idea I got on why this is happening is that it has something to do with superjson.If you are using superjson, you must set the superjson flag to true in the trpc-playground config.

const trpc = initTRPC.create({ transformer: superjson }) // <- if you are using superjson

// ...

app.use(
  playgroundEndpoint,
  await expressHandler({
    trpcApiEndpoint,
    playgroundEndpoint,
    router: appRouter,
    request: {
      superjson: true // <- set this to true
    },
  })
)

If this is not the issue, please share your TRPC router and endpoint setup.

[webcicle]

Thanks Mats, it was a version of this – I had forgotten to add superjson as a transformer when initializing TRPC