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
N
Nick441d ago
Do you have a transformer set up? What’s the exact and complete error?
J
jack441d 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
N
Nick441d ago
Yep dates can't survive json without superjson The error message is useful once you understand this
J
jack441d 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
N
Nick441d 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
J
jack441d ago
gotcha, thanks for the help
More 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 tIs 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 astrpc query running twiceHey guys. I have a trpc endpoint which makes a request to the discord api to fetch a list of the usetRPC Call To ServerOn the mobile version of my app, in NextJS, the build has to be static so I have to use my hosted weGet 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 schemeTRPC 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 otherUse middleware to send responseHello, how can I send a response from the middleware without executing the input, such as making a cdynamic 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.procedureNameTRPCClientError: Unexpected end of JSON inputHey I am running into this issue when calling a `mutateAsync` in production in Vercel (**the error dIs 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 procedurtRPC Cors Authentication ErrorHey, I was mainly looking to enable CORS locally for calling my tRPC endpoints in localhost:3000 (NeDemo 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 lGlobal context or shared context.We are using react query and trpc and we ran into a undesired effect I hope someone could help me wiNot 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 witthe tRPC loop or cyclewhat is the full sequesnce of execution of trpc? where does it start when a user requests something