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

Jjack

2/1/2023

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

Nnlucas

2/1/2023

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

Jjack

2/1/2023

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

Nnlucas

2/1/2023

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

Jjack

2/1/2023

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

Nnlucas

2/1/2023

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

Jjack

2/1/2023

gotcha, thanks for the help

Looking for more? Join the community!

tRPC

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

Join Server

tRPC

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

Join Server

Recommended Posts

pre fetch serveral prodecures dynamicallyHello!. I'm developing a React Native app which needs an offline mode for some assets that the user procedure input contextIs it possible to accesss context in trpc procedure input validation? I have an aray of values in t Is it normal to separate resolvers from routers?Wondering if it's common and/or whether it's a good idea to attempt to separate procedures from the i have an infinite loop within my hook but apps works as expected.when i console log inside this hook, it repeats non-stop every few seconds, but my app is working as trpc query running twiceHey guys. I have a trpc endpoint which makes a request to the discord api to fetch a list of the use tRPC Call To ServerOn the mobile version of my app, in NextJS, the build has to be static so I have to use my hosted we Get count of stages assigned to user with stage name?Need help in writing prisma query to get stages assigned to user with stage name? this is the scheme TRPC global loading pageHey. With trpc/nextjs I'm wondering if its possible to have a global loading context/state which is Multiple Clients/Services In tRPC ContextI know it's typical to pass around the prisma client in the trpc context, is the same true for other Use middleware to send responseHello, how can I send a response from the middleware without executing the input, such as making a c dynamic router creationhas anyone been able to create a dynamic router? e.g. i pass in the schema and some metadata and it Type issue react query with enabled.We migrate to trpc and using @tanstack/react-query directly to the trpc syntax of trpc.procedureName TRPCClientError: Unexpected end of JSON inputHey I am running into this issue when calling a `mutateAsync` in production in Vercel (**the error d Is it ok to use a createCaller() router within ServerSideProps?The official trpc docs shown an example of how to use the SSGHelper router within SSPs. The procedur tRPC Cors Authentication ErrorHey, I was mainly looking to enable CORS locally for calling my tRPC endpoints in localhost:3000 (Ne Demo code `trpc.infinitePosts.add` on infinitedQuery not workingDoc here: https://trpc.io/docs/useInfiniteQuery#getinfinitedata, I created an my query like this: ``NextJS + TRPC + NXi have a nextjs application inside a NX monorepo. i have everything for @trpc/server inside a node l Global context or shared context.We are using react query and trpc and we ran into a undesired effect I hope someone could help me wi Not sure how to troubleshoot `Failed to fetch at Function.from`Am getting this on a trpc mutation in v.9 that is firing successfully then pushing me to the URL wit the tRPC loop or cyclewhat is the full sequesnce of execution of trpc? where does it start when a user requests something