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, 32 insertions, 26 deletions

diff --git a/apps/mobile/app/signin.tsx b/apps/mobile/app/signin.tsx
index 03cbba5a..5c6370ca 100644
--- a/apps/mobile/app/signin.tsx
+++ b/apps/mobile/app/signin.tsx
@@ -13,7 +13,8 @@ import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { Text } from "@/components/ui/Text";
 import useAppSettings from "@/lib/settings";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation } from "@tanstack/react-query";
 import { Bug, Edit3 } from "lucide-react-native";
 
 enum LoginType {
@@ -24,6 +25,7 @@ enum LoginType {
 export default function Signin() {
   const { settings, setSettings } = useAppSettings();
   const router = useRouter();
+  const api = useTRPC();
 
   const [error, setError] = useState<string | undefined>();
   const [loginType, setLoginType] = useState<LoginType>(LoginType.Password);
@@ -43,33 +45,37 @@ export default function Signin() {
   };
 
   const { mutate: login, isPending: userNamePasswordRequestIsPending } =
-    api.apiKeys.exchange.useMutation({
-      onSuccess: (resp) => {
-        setSettings({ ...settings, apiKey: resp.key, apiKeyId: resp.id });
-      },
-      onError: (e) => {
-        if (e.data?.code === "UNAUTHORIZED") {
-          setError("Wrong username or password");
-        } else {
-          setError(`${e.message}`);
-        }
-      },
-    });
+    useMutation(
+      api.apiKeys.exchange.mutationOptions({
+        onSuccess: (resp) => {
+          setSettings({ ...settings, apiKey: resp.key, apiKeyId: resp.id });
+        },
+        onError: (e) => {
+          if (e.data?.code === "UNAUTHORIZED") {
+            setError("Wrong username or password");
+          } else {
+            setError(`${e.message}`);
+          }
+        },
+      }),
+    );
 
   const { mutate: validateApiKey, isPending: apiKeyValueRequestIsPending } =
-    api.apiKeys.validate.useMutation({
-      onSuccess: () => {
-        const apiKey = apiKeyRef.current;
-        setSettings({ ...settings, apiKey: apiKey });
-      },
-      onError: (e) => {
-        if (e.data?.code === "UNAUTHORIZED") {
-          setError("Invalid API key");
-        } else {
-          setError(`${e.message}`);
-        }
-      },
-    });
+    useMutation(
+      api.apiKeys.validate.mutationOptions({
+        onSuccess: () => {
+          const apiKey = apiKeyRef.current;
+          setSettings({ ...settings, apiKey: apiKey });
+        },
+        onError: (e) => {
+          if (e.data?.code === "UNAUTHORIZED") {
+            setError("Invalid API key");
+          } else {
+            setError(`${e.message}`);
+          }
+        },
+      }),
+    );
 
   if (settings.apiKey) {
     return <Redirect href="dashboard" />;