Martin•14mo 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 property on trpc queries are empty. Checking the network tab the data is definitely there in the response, it's just undefined when accessing query.data. After some time debugging, I removed the superjson transformer from client & server, and now things are working again. Unfortunately it also means I lack native objects (like Date). Version: 11.0.0-rc.553

2 Replies

hashwarp•14mo ago

superjson is superannoying - 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•8mo ago

superjson serializes the payload into two subkeys json and meta. if json key is not present in your payload, it can not deserialize it and returns undefined. just create a custom transformer to account for that.

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,
  },
};

assign this transformer in

import { initTRPC } from "@trpc/server";

initTRPC.create({
  transformer,
});

import { initTRPC } from "@trpc/server";

initTRPC.create({
  transformer,
});

Using superjson transformer makes data empty

Did you find this page helpful?