jack•2y ago

type mismatch between tRPC return (in sveltekit) and defined type

i've got this piece of code:

read: async () => {
  const res = await trpc($page).getCards.query();

  if (!res) return;

  cards = cards_reducer(cards, {
    type: 'reload',
    payload: { cards: res }
  });
},

read: async () => {
  const res = await trpc($page).getCards.query();

  if (!res) return;

  cards = cards_reducer(cards, {
    type: 'reload',
    payload: { cards: res }
  });
},

the issue is that the type of res, as returned from trpc, is SerializeObject<UndefinedToOptional<Card & { tasks: Task[]; }>>[], while i've type my cards state as (Card & { tasks: Task[]; })[];. as far as i can tell, there should be no mismatch in type here, but the linter isn't happy with trying to pass res as the same type as cards

6 Replies

Nick•2y ago

Do you have a transformer set up? What’s the exact and complete error?

jack•2y ago

not entirely sure if i have a transformer, i mostly tried to follow the instructions here: https://icflorescu.github.io/trpc-sveltekit/, but then i added my prisma client onto the context. error is:

Type 'SerializeObject<UndefinedToOptional<Card & { tasks: Task[]; }>>' is not assignable to type 'Card & Task[]'.
    Type 'SerializeObject<UndefinedToOptional<Card & { tasks: Task[]; }>>' is not assignable to type 'Card'.
      Types of property 'createdAt' are incompatible.
        Type 'string' is not assignable to type 'Date'.

Type 'SerializeObject<UndefinedToOptional<Card & { tasks: Task[]; }>>' is not assignable to type 'Card & Task[]'.
    Type 'SerializeObject<UndefinedToOptional<Card & { tasks: Task[]; }>>' is not assignable to type 'Card'.
      Types of property 'createdAt' are incompatible.
        Type 'string' is not assignable to type 'Date'.

now that i look at it closer, im assuming that the Date type when returned from trpc is string, but still Date on the actual type imported from the prisma client ? ok, added superjson; seems like it'll make things a fair bit easier

Nick•2y ago

Yep dates can't survive json without superjson The error message is useful once you understand this

jack•2y ago

yea, thanks! quick question: I just followed the docs surrounding how to add superjson, but the sveltekit trpc setup is a bit different that that in the regular docs. not sure if this is enough context, but do I need to add the transformer on both client initializations here?

export function trpc(init?: TRPCClientInit) {
    if (typeof window === 'undefined')
        return createTRPCClient<Router>({ init, transformer: superjson });
    if (!browserClient) browserClient = createTRPCClient<Router>({ transformer: superjson });
    return browserClient;
}

export function trpc(init?: TRPCClientInit) {
    if (typeof window === 'undefined')
        return createTRPCClient<Router>({ init, transformer: superjson });
    if (!browserClient) browserClient = createTRPCClient<Router>({ transformer: superjson });
    return browserClient;
}

seems like it has something to do with server vs client, but im not entirely clear on whats happening here i added to both just to be safe

Nick•2y ago

I'm guessing the starter you're using does SSR and client rehydration. I believe this pattern is common on NextJS to support both environments Not my area of experience though

jack•2y ago

gotcha, thanks for the help