MadMax•7mo 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•7mo 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