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?

jackOP•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

jackOP•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

jackOP•2y ago

gotcha, thanks for the help

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

Did you find this page helpful?