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, 61 insertions, 44 deletions

diff --git a/apps/web/lib/hooks/useImportSessions.ts b/apps/web/lib/hooks/useImportSessions.ts
index 1482f33d..133bb29b 100644
--- a/apps/web/lib/hooks/useImportSessions.ts
+++ b/apps/web/lib/hooks/useImportSessions.ts
@@ -1,62 +1,79 @@
 "use client";
 
 import { toast } from "@/components/ui/sonner";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { api } from "@karakeep/shared-react/trpc";
+import { useTRPC } from "@karakeep/shared-react/trpc";
 
 export function useCreateImportSession() {
-  const apiUtils = api.useUtils();
-
-  return api.importSessions.createImportSession.useMutation({
-    onSuccess: () => {
-      apiUtils.importSessions.listImportSessions.invalidate();
-    },
-    onError: (error) => {
-      toast({
-        description: error.message || "Failed to create import session",
-        variant: "destructive",
-      });
-    },
-  });
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    api.importSessions.createImportSession.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries(
+          api.importSessions.listImportSessions.pathFilter(),
+        );
+      },
+      onError: (error) => {
+        toast({
+          description: error.message || "Failed to create import session",
+          variant: "destructive",
+        });
+      },
+    }),
+  );
 }
 
 export function useListImportSessions() {
-  return api.importSessions.listImportSessions.useQuery(
-    {},
-    {
-      select: (data) => data.sessions,
-    },
+  const api = useTRPC();
+  return useQuery(
+    api.importSessions.listImportSessions.queryOptions(
+      {},
+      {
+        select: (data) => data.sessions,
+      },
+    ),
   );
 }
 
 export function useImportSessionStats(importSessionId: string) {
-  return api.importSessions.getImportSessionStats.useQuery(
-    {
-      importSessionId,
-    },
-    {
-      refetchInterval: 5000, // Refetch every 5 seconds to show progress
-      enabled: !!importSessionId,
-    },
+  const api = useTRPC();
+  return useQuery(
+    api.importSessions.getImportSessionStats.queryOptions(
+      {
+        importSessionId,
+      },
+      {
+        refetchInterval: 5000, // Refetch every 5 seconds to show progress
+        enabled: !!importSessionId,
+      },
+    ),
   );
 }
 
 export function useDeleteImportSession() {
-  const apiUtils = api.useUtils();
-
-  return api.importSessions.deleteImportSession.useMutation({
-    onSuccess: () => {
-      apiUtils.importSessions.listImportSessions.invalidate();
-      toast({
-        description: "Import session deleted successfully",
-        variant: "default",
-      });
-    },
-    onError: (error) => {
-      toast({
-        description: error.message || "Failed to delete import session",
-        variant: "destructive",
-      });
-    },
-  });
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    api.importSessions.deleteImportSession.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries(
+          api.importSessions.listImportSessions.pathFilter(),
+        );
+        toast({
+          description: "Import session deleted successfully",
+          variant: "default",
+        });
+      },
+      onError: (error) => {
+        toast({
+          description: error.message || "Failed to delete import session",
+          variant: "destructive",
+        });
+      },
+    }),
+  );
 }