M

tRPC•15mo ago

Using superjson transformer makes data empty

Hi!

I've been developing using trpc for the past month or so. It's been a smooth sail so far. Suddenly now the

.data

.data

property on trpc queries are empty.

Checking the network tab the data is definitely there in the response, it's just

undefined

undefined

when accessing

query.data

query.data

. After some time debugging, I removed the

superjson

superjson

transformer from client & server, and now things are working again.

Unfortunately it also means I lack native objects (like

Date

Date

).

Version:

11.0.0-rc.553

11.0.0-rc.553

hashwarp

H

hashwarp•10/4/24, 4:57 AM

superjson

superjson

is

with ChatGPT its easy to create your own serializers. if you want to see what that looks like, I just added them to my growing library of utils: https://github.com/arken-engineering/node/blob/main/util/rpc.ts#L31-L106

Milad137

M

Milad137•3/27/25, 2:49 AM

superjson

superjson

serializes the payload into two subkeys and . if key is not present in your payload, it can not deserialize it and returns

undefined

undefined

. just create a custom transformer to account for that.

assign this in

import SuperJSON, { type SuperJSONResult } from "superjson";

export const transformer = {
  input: {
    /**
     * This function runs **on the client** before sending the data to the server.
     */
    serialize: SuperJSON.serialize,
    /**
     * This function runs **on the server** to transform the data before it is passed to the resolver
     */
    deserialize: (obj: SuperJSONResult) => {
      if ("json" in obj) {
        return SuperJSON.deserialize(obj);
      } else {
        return SuperJSON.deserialize({ json: obj });
      }
    },
  },
  output: {
    /**
     * This function runs **on the server** before sending the data to the client.
     */
    serialize: SuperJSON.serialize,
    /**
     * This function runs **only on the client** to transform the data sent from the server.
     */
    deserialize: SuperJSON.deserialize,
  },
};

import SuperJSON, { type SuperJSONResult } from "superjson";

export const transformer = {
  input: {
    /**
     * This function runs **on the client** before sending the data to the server.
     */
    serialize: SuperJSON.serialize,
    /**
     * This function runs **on the server** to transform the data before it is passed to the resolver
     */
    deserialize: (obj: SuperJSONResult) => {
      if ("json" in obj) {
        return SuperJSON.deserialize(obj);
      } else {
        return SuperJSON.deserialize({ json: obj });
      }
    },
  },
  output: {
    /**
     * This function runs **on the server** before sending the data to the client.
     */
    serialize: SuperJSON.serialize,
    /**
     * This function runs **only on the client** to transform the data sent from the server.
     */
    deserialize: SuperJSON.deserialize,
  },
};