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, 13 insertions, 9 deletions

diff --git a/apps/web/components/utils/ValidAccountCheck.tsx b/apps/web/components/utils/ValidAccountCheck.tsx
index 5ca5fd5c..49f42f9c 100644
--- a/apps/web/components/utils/ValidAccountCheck.tsx
+++ b/apps/web/components/utils/ValidAccountCheck.tsx
@@ -2,22 +2,26 @@
 
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 
 /**
  * This component is used to address a confusion when the JWT token exists but the user no longer exists in the database.
  * So this component synchronusly checks if the user is still valid and if not, signs out the user.
  */
 export default function ValidAccountCheck() {
+  const api = useTRPC();
   const router = useRouter();
-  const { error } = api.users.whoami.useQuery(undefined, {
-    retry: (_failureCount, error) => {
-      if (error.data?.code === "UNAUTHORIZED") {
-        return false;
-      }
-      return true;
-    },
-  });
+  const { error } = useQuery(
+    api.users.whoami.queryOptions(undefined, {
+      retry: (_failureCount, error) => {
+        if (error.data?.code === "UNAUTHORIZED") {
+          return false;
+        }
+        return true;
+      },
+    }),
+  );
   useEffect(() => {
     if (error?.data?.code === "UNAUTHORIZED") {
       router.push("/logout");