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;
  }),
});

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>
    </>
  );
};