useQuery response returns an object containing a json key

[haldunanil]

A little confused about what I might be doing wrong here, but I'm using tRPC (v10.5.0) with Prisma (v4.7.1) on Next.js (v13.0.7) and when I call useQuery, the data object contains a json key-value pair that contains the actual response. The typing doesn't actually match this (and it's not what I expect anyway) so I'm having a hard time using it.

The endpoint response looks something like this:

list: publicProcedure.query(() => prisma.product.findMany({...});

and in my component, I'm calling it like so:

const query = trpc.dashboard.product.list.useQuery();

but when I log query.data, it looks like this:

{
  "json": [ ... ]
}

Looking at the network call, it also looks like the json thing is happening when the trpc endpoint responds, as this is the API response payload:

[
  {
    "result": {
      "data": {
        "json": [
          ...
        ]
      }
    }
  }
]

What might be the issue?

[KATT]

It seems like you've setup the data transformer on the server but not on the client https://trpc.io/docs/data-transformers

[haldunanil]

Thanks, this helped! As a follow-up to help others who may end up here:

Adding transformer superjson to the config object returned within the createTRPCNext call in addition to the initTRPC.context<Context>().create call fixed this.

[jeffrey-computers]

Note @KATT this same issue occurs when calling createServerSideHelpers.dehydrate() with the transformer: superjson arg.

An object like this is returned { json: { mutations: [], queries: [Array] } }
Whereas ReactQuery's <HydrationBoundary> expects the structure { mutations: [], queries: [ [Object] ] }