Mayhul Comments - Answer Overflow

Mayhul

Explore posts from servers

•Created by Mayhul on 1/6/2025 in #❓-help

Migrating to use Superjson

For anyone reading this in the future, I also had to handle the case where data is undefined or null:

//On server
const t = initTRPC.context<Context>().create({
  transformer: {
    serialize: (data: any) => {
      return data;
    },
    deserialize: (data: any) => {
      if (!data) {
           return data;
      }

      const isSuperJson = data.json !== undefined;
      if (isSuperJson) {
        return superjson.deserialize(data);
      } else {
        return data;
      }
    },
  },
});

//On server
const t = initTRPC.context<Context>().create({
  transformer: {
    serialize: (data: any) => {
      return data;
    },
    deserialize: (data: any) => {
      if (!data) {
           return data;
      }

      const isSuperJson = data.json !== undefined;
      if (isSuperJson) {
        return superjson.deserialize(data);
      } else {
        return data;
      }
    },
  },
});

10 replies

TtRPC

•Created by Mayhul on 1/6/2025 in #❓-help

Migrating to use Superjson

Here's the solution I came up with: Step 1, update my code to look like:

//On client
export const trpcClient = trpc.createClient({
  transformer: {
    serialize: (data: any) => {
      return superjson.serialize(data);
    },
    deserialize: (data: any) => {
      const isSuperJson = data.json !== undefined;
      if (isSuperJson) {
        return superjson.deserialize(data);
      } else {
        return data;
      }
    },
  },
});

//On server
const t = initTRPC.context<Context>().create({
  transformer: {
    serialize: (data: any) => {
      return data;
    },
    deserialize: (data: any) => {
      const isSuperJson = data.json !== undefined;
      if (isSuperJson) {
        return superjson.deserialize(data);
      } else {
        return data;
      }
    },
  },
});

//On client
export const trpcClient = trpc.createClient({
  transformer: {
    serialize: (data: any) => {
      return superjson.serialize(data);
    },
    deserialize: (data: any) => {
      const isSuperJson = data.json !== undefined;
      if (isSuperJson) {
        return superjson.deserialize(data);
      } else {
        return data;
      }
    },
  },
});

//On server
const t = initTRPC.context<Context>().create({
  transformer: {
    serialize: (data: any) => {
      return data;
    },
    deserialize: (data: any) => {
      const isSuperJson = data.json !== undefined;
      if (isSuperJson) {
        return superjson.deserialize(data);
      } else {
        return data;
      }
    },
  },
});

Deploy this, force all of our React Native to update. Then, once all of our clients have updated, I can switch to using superjson as normal. Basically wrapping superjson to be backwards compatible. Assuming that we don't use json as a key in any of our trpc inputs/ouputs, are there any other issues that you think this could cause?

10 replies

TtRPC

•Created by Mayhul on 1/6/2025 in #❓-help

Migrating to use Superjson

If I'm merging multiple routers together, is there a way for me to apply the superjson transformer to just 1 router?

10 replies

Gaming

Programming