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

diff --git a/apps/web/components/settings/SubscriptionSettings.tsx b/apps/web/components/settings/SubscriptionSettings.tsx
index 03337c1b..3799d08b 100644
--- a/apps/web/components/settings/SubscriptionSettings.tsx
+++ b/apps/web/components/settings/SubscriptionSettings.tsx
@@ -3,7 +3,8 @@
 import { useEffect } from "react";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { CreditCard, Loader2 } from "lucide-react";
 
 import { Alert, AlertDescription } from "../ui/alert";
@@ -19,24 +20,27 @@ import {
 import { Skeleton } from "../ui/skeleton";
 
 export default function SubscriptionSettings() {
+  const api = useTRPC();
   const { t } = useTranslation();
   const {
     data: subscriptionStatus,
     refetch,
     isLoading: isQueryLoading,
-  } = api.subscriptions.getSubscriptionStatus.useQuery();
+  } = useQuery(api.subscriptions.getSubscriptionStatus.queryOptions());
 
-  const { data: subscriptionPrice } =
-    api.subscriptions.getSubscriptionPrice.useQuery();
+  const { data: subscriptionPrice } = useQuery(
+    api.subscriptions.getSubscriptionPrice.queryOptions(),
+  );
 
-  const { mutate: syncStripeState } =
-    api.subscriptions.syncWithStripe.useMutation({
+  const { mutate: syncStripeState } = useMutation(
+    api.subscriptions.syncWithStripe.mutationOptions({
       onSuccess: () => {
         refetch();
       },
-    });
-  const createCheckoutSession =
-    api.subscriptions.createCheckoutSession.useMutation({
+    }),
+  );
+  const createCheckoutSession = useMutation(
+    api.subscriptions.createCheckoutSession.mutationOptions({
       onSuccess: (resp) => {
         if (resp.url) {
           window.location.href = resp.url;
@@ -48,9 +52,10 @@ export default function SubscriptionSettings() {
           variant: "destructive",
         });
       },
-    });
-  const createPortalSession = api.subscriptions.createPortalSession.useMutation(
-    {
+    }),
+  );
+  const createPortalSession = useMutation(
+    api.subscriptions.createPortalSession.mutationOptions({
       onSuccess: (resp) => {
         if (resp.url) {
           window.location.href = resp.url;
@@ -62,7 +67,7 @@ export default function SubscriptionSettings() {
           variant: "destructive",
         });
       },
-    },
+    }),
   );
 
   const isLoading =