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, 4 insertions, 2 deletions

diff --git a/apps/web/components/admin/AdminNotices.tsx b/apps/web/components/admin/AdminNotices.tsx
index 77b1b481..e9d9a692 100644
--- a/apps/web/components/admin/AdminNotices.tsx
+++ b/apps/web/components/admin/AdminNotices.tsx
@@ -2,7 +2,8 @@
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 import { AlertCircle } from "lucide-react";
 
 import { AdminCard } from "./AdminCard";
@@ -14,7 +15,8 @@ interface AdminNotice {
 }
 
 function useAdminNotices() {
-  const { data } = api.admin.getAdminNoticies.useQuery();
+  const api = useTRPC();
+  const { data } = useQuery(api.admin.getAdminNoticies.queryOptions());
   if (!data) {
     return [];
   }