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/signup/SignUpForm.tsx b/apps/web/components/signup/SignUpForm.tsx
index 845c6d1e..77d6ba02 100644
--- a/apps/web/components/signup/SignUpForm.tsx
+++ b/apps/web/components/signup/SignUpForm.tsx
@@ -25,9 +25,10 @@ import {
 import { Input } from "@/components/ui/input";
 import { signIn } from "@/lib/auth/client";
 import { useClientConfig } from "@/lib/clientConfig";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Turnstile } from "@marsidev/react-turnstile";
+import { useMutation } from "@tanstack/react-query";
 import { TRPCClientError } from "@trpc/client";
 import { AlertCircle, UserX } from "lucide-react";
 import { useForm } from "react-hook-form";
@@ -38,6 +39,7 @@ import { zSignUpSchema } from "@karakeep/shared/types/users";
 const VERIFY_EMAIL_ERROR = "Please verify your email address before signing in";
 
 export default function SignUpForm() {
+  const api = useTRPC();
   const form = useForm<z.infer<typeof zSignUpSchema>>({
     resolver: zodResolver(zSignUpSchema),
     defaultValues: {
@@ -54,7 +56,7 @@ export default function SignUpForm() {
   const turnstileSiteKey = clientConfig.turnstile?.siteKey;
   const turnstileRef = useRef<TurnstileInstance>(null);
 
-  const createUserMutation = api.users.create.useMutation();
+  const createUserMutation = useMutation(api.users.create.mutationOptions());
 
   if (
     clientConfig.auth.disableSignups ||