refactor: migrate trpc to the new react query integration mode (#2438)

* refactor: migrate trpc to the new react query integration mode

* more fixes

* more migrations

* upgrade trpc client

1 files changed, 5 insertions, 7 deletions

diff --git a/apps/web/app/settings/stats/page.tsx b/apps/web/app/settings/stats/page.tsx
index 28c017f5..06076376 100644
--- a/apps/web/app/settings/stats/page.tsx
+++ b/apps/web/app/settings/stats/page.tsx
@@ -6,7 +6,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 import {
   Archive,
   BarChart3,
@@ -159,9 +160,10 @@ function StatCard({
 }
 
 export default function StatsPage() {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const { data: stats, isLoading } = api.users.stats.useQuery();
-  const { data: userSettings } = api.users.settings.useQuery();
+  const { data: stats, isLoading } = useQuery(api.users.stats.queryOptions());
+  const { data: userSettings } = useQuery(api.users.settings.queryOptions());
 
   const maxHourlyActivity = useMemo(() => {
     if (!stats) return 0;
@@ -237,7 +239,6 @@ export default function StatsPage() {
           </p>
         </div>
       </div>
-
       {/* Overview Stats */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <StatCard
@@ -289,7 +290,6 @@ export default function StatsPage() {
           description={t("settings.stats.overview.bookmarks_added")}
         />
       </div>
-
       <div className="grid gap-6 md:grid-cols-2">
         {/* Bookmark Types */}
         <Card>
@@ -532,7 +532,6 @@ export default function StatsPage() {
           </CardContent>
         </Card>
       </div>
-
       {/* Activity Patterns */}
       <div className="grid gap-6 md:grid-cols-2">
         {/* Hourly Activity */}
@@ -583,7 +582,6 @@ export default function StatsPage() {
           </CardContent>
         </Card>
       </div>
-
       {/* Asset Storage */}
       {stats.assetsByType.length > 0 && (
         <Card>