T
tRPC

❓-help

How to infer query types on client?

MMadMax1/21/2024
export const tenantRouter = router({
getTenants: procedure.query(() => {
return { hello: "world" };
}),
getTenant: procedure.query(async ({ ctx }) => {
const res = await getTenantById(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Tenant not found",
});
}
return res.value;
}),
});
export const tenantRouter = router({
getTenants: procedure.query(() => {
return { hello: "world" };
}),
getTenant: procedure.query(async ({ ctx }) => {
const res = await getTenantById(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Tenant not found",
});
}
return res.value;
}),
});
client code
export const GetTest = () => {
const test = trpc.getTenants.useQuery();
const test2 = trpc.getTenant.useQuery();
console.log(test2.data);
return (
<>
{/* <h1>{test2.data?.hello}</h1> */}
<pre>{test.data?.hello}</pre>
</>
);
};
export const GetTest = () => {
const test = trpc.getTenants.useQuery();
const test2 = trpc.getTenant.useQuery();
console.log(test2.data);
return (
<>
{/* <h1>{test2.data?.hello}</h1> */}
<pre>{test.data?.hello}</pre>
</>
);
};
MMadMax1/22/2024
This also doesnt work
return res.value as Tenant
return res.value as Tenant
hovering over test2 shows this data is still type any
(property) getTenant: DecoratedQuery<RootConfig<{
ctx: {
user: IdToken;
};
meta: object;
errorShape: DefaultErrorShape;
transformer: typeof SuperJSON;
}>, QueryProcedure<{
input: void;
output: Tenant;
}>>
(property) getTenant: DecoratedQuery<RootConfig<{
ctx: {
user: IdToken;
};
meta: object;
errorShape: DefaultErrorShape;
transformer: typeof SuperJSON;
}>, QueryProcedure<{
input: void;
output: Tenant;
}>>
While this works I wonder why
getTenant: procedure.query(async ({ ctx }) => {
const res = await getTenantById(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Tenant not found",
});
}
return {
name: res.value.name,
website: res.value.website,
email: res.value.email,
picture: res.value.picture,
};
}),
getTenant: procedure.query(async ({ ctx }) => {
const res = await getTenantById(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Tenant not found",
});
}
return {
name: res.value.name,
website: res.value.website,
email: res.value.email,
picture: res.value.picture,
};
}),
getUsers: procedure.query(async ({ ctx }): Promise<User[]> => {
const res = await getAllUsers(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Users not found",
});
}
return res.value;
})
getUsers: procedure.query(async ({ ctx }): Promise<User[]> => {
const res = await getAllUsers(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Users not found",
});
}
return res.value;
})
hovering over value clearly has type
(property) Result<{ name: string; email: string | null; permissions: unknown; role: string | null; id: string; createdAt: string | null; tenantId: string | null; cognitoId: string | null; }[], Error>.value: {
name: string;
email: string | null;
permissions: unknown;
role: string | null;
id: string;
createdAt: string | null;
tenantId: string | null;
cognitoId: string | null;
}[]
(property) Result<{ name: string; email: string | null; permissions: unknown; role: string | null; id: string; createdAt: string | null; tenantId: string | null; cognitoId: string | null; }[], Error>.value: {
name: string;
email: string | null;
permissions: unknown;
role: string | null;
id: string;
createdAt: string | null;
tenantId: string | null;
cognitoId: string | null;
}[]
on client
type tenatType = RouterOutputs["tenant"]["getUsers"] | undefined;
const test: tenatType = trpc.tenant.getUsers.useQuery().data
type tenatType = RouterOutputs["tenant"]["getUsers"] | undefined;
const test: tenatType = trpc.tenant.getUsers.useQuery().data
test has type User[] an empty array

Looking for more? Join the community!

Recommended Posts
NextJS Output TypingsQuick question probably stupid, I learned about this library yesterday and completely migrated from 'react-server-dom-webpack/client' errorHey, i am trying to get started with TRPC but getting this error ```shell ../../node_modules/.pnpm/React Query client errors on 401I'm throwing a `TRPCError({ code: "UNAUTHORIZED" })` in a middleware, and handling error states retuExtremely slow queriesI'm having elapsed time of 2 to 5 seconds and I just switched from mongo to postgres. Is it the DB lTRPC works but getting unpredictable Typescript warnings for a barebones trpc monorepo projectHi, TRPC is working as expected but there are many warnings that feels very "off" for simple proceduKirimase's tRPC usage CRUD routeHey, using Nico's Kirimase tRPC package. I am trying to call the queries and mutations, in the db/scClient `tsc` checking server codeI have a trpc server and vite/react client set up in a pnpm monorepo. The VSCode type checking is beUnable to set up a client side subscription to a trpc route that supports websocketsI wrote the code on the client side here to query the subscription: https://github.com/sumanthneerumwhat's this union type doing(Zod)?I have 2 types of user, guest and registered(schemas). I have a union type with both and the guest dtrpc's useQuery with undefined input adds extra {"values":["undefined"]} to queryMy React app has several calls to query endpoints that have no input data but that do need useQuery Can you ensureData without the useUtils hook?The Tanstack Router docs recommend calling `ensureQueryData` in a route’s loader function if using THelp with queries vs mutationssuper basic question here from a newb to trpc...i see the calls are basically split into two type, q