Saitama
Saitama2w ago

Type error when following guide TRPC React query: 'lazy' is declared here.

Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }>' does not satisfy the constraint 'Router<any, any>'.
Types of property '_def' are incompatible.
Property 'lazy' is missing in type 'RouterDef<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }, { ...; }>' but required in type '{ _config: RootConfig<any>; router: true; procedure?: undefined; procedures: any; record: any; lazy: Record<string, LazyLoader<AnyRouter>>; }'.
Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }>' does not satisfy the constraint 'Router<any, any>'.
Types of property '_def' are incompatible.
Property 'lazy' is missing in type 'RouterDef<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { users: CreateRouterInner<...>; }, { ...; }>' but required in type '{ _config: RootConfig<any>; router: true; procedure?: undefined; procedures: any; record: any; lazy: Record<string, LazyLoader<AnyRouter>>; }'.
https://trpc.io/docs/client/tanstack-react-query/setup#3a-setup-the-trpc-context-provider I followed steps from guide to integrate react query tho it throws type error
import { initTRPC } from '@trpc/server';
import { z } from 'zod';

const t = initTRPC.create();
const publicProcedure = t.procedure;

const appRouter = t.router({
users: t.router({
getUserById: publicProcedure
.input(z.object({ userId: z.string() }))
.output(
z.object({
name: z.string(),
email: z.string(),
password: z.string(),
}),
)
.query(async () => 'PLACEHOLDER' as any),
}),
});
export type AppRouter = typeof appRouter;
import { initTRPC } from '@trpc/server';
import { z } from 'zod';

const t = initTRPC.create();
const publicProcedure = t.procedure;

const appRouter = t.router({
users: t.router({
getUserById: publicProcedure
.input(z.object({ userId: z.string() }))
.output(
z.object({
name: z.string(),
email: z.string(),
password: z.string(),
}),
)
.query(async () => 'PLACEHOLDER' as any),
}),
});
export type AppRouter = typeof appRouter;
import { createTRPCContext } from '@trpc/tanstack-react-query';
import { AppRouter } from '@server/@generated/server'

export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();
import { createTRPCContext } from '@trpc/tanstack-react-query';
import { AppRouter } from '@server/@generated/server'

export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();
TanStack React Query | tRPC
TanStack React Query setup
No description
2 Replies
FluX
FluX2w ago
Make sure your server and client are using the exact same version of trpc. That should usually fix errors like this one. (If your versions are already in sync, I unfortunately have no clue what's wrong)
Saitama
SaitamaOP2w ago
yea that was the case

Did you find this page helpful?