MadMax
MadMax9mo ago

How to infer query types on client?

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>
</>
);
};
1 Reply
MadMax
MadMax9mo ago
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