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, 71 insertions, 60 deletions

diff --git a/apps/web/components/admin/BackgroundJobs.tsx b/apps/web/components/admin/BackgroundJobs.tsx
index 382069c8..3dab3c54 100644
--- a/apps/web/components/admin/BackgroundJobs.tsx
+++ b/apps/web/components/admin/BackgroundJobs.tsx
@@ -13,8 +13,8 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
-import { keepPreviousData } from "@tanstack/react-query";
+import { useTRPC } from "@/lib/trpc";
+import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
 import {
   Activity,
   AlertTriangle,
@@ -254,13 +254,51 @@ function JobCard({
 }
 
 function useJobActions() {
+  const api = useTRPC();
   const { t } = useTranslation();
 
   const { mutateAsync: recrawlLinks, isPending: isRecrawlPending } =
-    api.admin.recrawlLinks.useMutation({
+    useMutation(
+      api.admin.recrawlLinks.mutationOptions({
+        onSuccess: () => {
+          toast({
+            description: "Recrawl enqueued",
+          });
+        },
+        onError: (e) => {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        },
+      }),
+    );
+
+  const { mutateAsync: reindexBookmarks, isPending: isReindexPending } =
+    useMutation(
+      api.admin.reindexAllBookmarks.mutationOptions({
+        onSuccess: () => {
+          toast({
+            description: "Reindex enqueued",
+          });
+        },
+        onError: (e) => {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        },
+      }),
+    );
+
+  const {
+    mutateAsync: reprocessAssetsFixMode,
+    isPending: isReprocessingPending,
+  } = useMutation(
+    api.admin.reprocessAssetsFixMode.mutationOptions({
       onSuccess: () => {
         toast({
-          description: "Recrawl enqueued",
+          description: "Reprocessing enqueued",
         });
       },
       onError: (e) => {
@@ -269,13 +307,17 @@ function useJobActions() {
           description: e.message,
         });
       },
-    });
+    }),
+  );
 
-  const { mutateAsync: reindexBookmarks, isPending: isReindexPending } =
-    api.admin.reindexAllBookmarks.useMutation({
+  const {
+    mutateAsync: reRunInferenceOnAllBookmarks,
+    isPending: isInferencePending,
+  } = useMutation(
+    api.admin.reRunInferenceOnAllBookmarks.mutationOptions({
       onSuccess: () => {
         toast({
-          description: "Reindex enqueued",
+          description: "Inference jobs enqueued",
         });
       },
       onError: (e) => {
@@ -284,58 +326,27 @@ function useJobActions() {
           description: e.message,
         });
       },
-    });
-
-  const {
-    mutateAsync: reprocessAssetsFixMode,
-    isPending: isReprocessingPending,
-  } = api.admin.reprocessAssetsFixMode.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Reprocessing enqueued",
-      });
-    },
-    onError: (e) => {
-      toast({
-        variant: "destructive",
-        description: e.message,
-      });
-    },
-  });
-
-  const {
-    mutateAsync: reRunInferenceOnAllBookmarks,
-    isPending: isInferencePending,
-  } = api.admin.reRunInferenceOnAllBookmarks.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Inference jobs enqueued",
-      });
-    },
-    onError: (e) => {
-      toast({
-        variant: "destructive",
-        description: e.message,
-      });
-    },
-  });
+    }),
+  );
 
   const {
     mutateAsync: runAdminMaintenanceTask,
     isPending: isAdminMaintenancePending,
-  } = api.admin.runAdminMaintenanceTask.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Admin maintenance request has been enqueued!",
-      });
-    },
-    onError: (e) => {
-      toast({
-        variant: "destructive",
-        description: e.message,
-      });
-    },
-  });
+  } = useMutation(
+    api.admin.runAdminMaintenanceTask.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: "Admin maintenance request has been enqueued!",
+        });
+      },
+      onError: (e) => {
+        toast({
+          variant: "destructive",
+          description: e.message,
+        });
+      },
+    }),
+  );
 
   return {
     crawlActions: [
@@ -466,13 +477,13 @@ function useJobActions() {
 }
 
 export default function BackgroundJobs() {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const { data: serverStats } = api.admin.backgroundJobsStats.useQuery(
-    undefined,
-    {
+  const { data: serverStats } = useQuery(
+    api.admin.backgroundJobsStats.queryOptions(undefined, {
       refetchInterval: 1000,
       placeholderData: keepPreviousData,
-    },
+    }),
   );
 
   const actions = useJobActions();