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, 18 insertions, 14 deletions

diff --git a/apps/web/components/settings/RegenerateApiKey.tsx b/apps/web/components/settings/RegenerateApiKey.tsx
index f4914598..9ee0e216 100644
--- a/apps/web/components/settings/RegenerateApiKey.tsx
+++ b/apps/web/components/settings/RegenerateApiKey.tsx
@@ -16,7 +16,8 @@ import {
 } from "@/components/ui/dialog";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation } from "@tanstack/react-query";
 import { RefreshCcw } from "lucide-react";
 
 import ApiKeySuccess from "./ApiKeySuccess";
@@ -28,25 +29,28 @@ export default function RegenerateApiKey({
   id: string;
   name: string;
 }) {
+  const api = useTRPC();
   const { t } = useTranslation();
   const router = useRouter();
 
   const [key, setKey] = useState<string | undefined>(undefined);
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
-  const mutator = api.apiKeys.regenerate.useMutation({
-    onSuccess: (resp) => {
-      setKey(resp.key);
-      router.refresh();
-    },
-    onError: () => {
-      toast({
-        description: t("common.something_went_wrong"),
-        variant: "destructive",
-      });
-      setDialogOpen(false);
-    },
-  });
+  const mutator = useMutation(
+    api.apiKeys.regenerate.mutationOptions({
+      onSuccess: (resp) => {
+        setKey(resp.key);
+        router.refresh();
+      },
+      onError: () => {
+        toast({
+          description: t("common.something_went_wrong"),
+          variant: "destructive",
+        });
+        setDialogOpen(false);
+      },
+    }),
+  );
 
   const handleRegenerate = () => {
     mutator.mutate({ id });