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, 19 insertions, 8 deletions

diff --git a/apps/web/components/admin/UserList.tsx b/apps/web/components/admin/UserList.tsx
index 69f9e3b9..810a945f 100644
--- a/apps/web/components/admin/UserList.tsx
+++ b/apps/web/components/admin/UserList.tsx
@@ -13,7 +13,12 @@ import {
 } from "@/components/ui/table";
 import { useSession } from "@/lib/auth/client";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { Check, KeyRound, Pencil, Trash, UserPlus, X } from "lucide-react";
 
 import ActionConfirmingDialog from "../ui/action-confirming-dialog";
@@ -30,18 +35,23 @@ function toHumanReadableSize(size: number) {
 }
 
 export default function UsersSection() {
+  const api = useTRPC();
+  const queryClient = useQueryClient();
   const { t } = useTranslation();
   const { data: session } = useSession();
-  const invalidateUserList = api.useUtils().users.list.invalidate;
-  const [{ users }] = api.users.list.useSuspenseQuery();
-  const [userStats] = api.admin.userStats.useSuspenseQuery();
-  const { mutateAsync: deleteUser, isPending: isDeletionPending } =
-    api.users.delete.useMutation({
+  const {
+    data: { users },
+  } = useSuspenseQuery(api.users.list.queryOptions());
+  const { data: userStats } = useSuspenseQuery(
+    api.admin.userStats.queryOptions(),
+  );
+  const { mutateAsync: deleteUser, isPending: isDeletionPending } = useMutation(
+    api.users.delete.mutationOptions({
       onSuccess: () => {
         toast({
           description: "User deleted",
         });
-        invalidateUserList();
+        queryClient.invalidateQueries(api.users.list.pathFilter());
       },
       onError: (e) => {
         toast({
@@ -49,7 +59,8 @@ export default function UsersSection() {
           description: `Something went wrong: ${e.message}`,
         });
       },
-    });
+    }),
+  );
 
   return (
     <AdminCard>