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

3 files changed, 84 insertions, 62 deletions

diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index f94e4691..0b6b229d 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useRef } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
-import { api } from "@/lib/trpc";
-import { keepPreviousData } from "@tanstack/react-query";
+import { useTRPC } from "@/lib/trpc";
+import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
 
 import { parseSearchQuery } from "@karakeep/shared/searchQueryParser";
 
@@ -55,6 +55,7 @@ export function useDoBookmarkSearch() {
 }
 
 export function useBookmarkSearch() {
+  const api = useTRPC();
   const { searchQuery } = useSearchQuery();
   const sortOrder = useSortOrderStore((state) => state.sortOrder);
 
@@ -67,17 +68,19 @@ export function useBookmarkSearch() {
     fetchNextPage,
     isFetchingNextPage,
     refetch,
-  } = api.bookmarks.searchBookmarks.useInfiniteQuery(
-    {
-      text: searchQuery,
-      sortOrder,
-    },
-    {
-      placeholderData: keepPreviousData,
-      gcTime: 0,
-      initialCursor: null,
-      getNextPageParam: (lastPage) => lastPage.nextCursor,
-    },
+  } = useInfiniteQuery(
+    api.bookmarks.searchBookmarks.infiniteQueryOptions(
+      {
+        text: searchQuery,
+        sortOrder,
+      },
+      {
+        placeholderData: keepPreviousData,
+        gcTime: 0,
+        initialCursor: null,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+      },
+    ),
   );
 
   useEffect(() => {
diff --git a/apps/web/lib/hooks/useBookmarkImport.ts b/apps/web/lib/hooks/useBookmarkImport.ts
index f2522d9a..71d06522 100644
--- a/apps/web/lib/hooks/useBookmarkImport.ts
+++ b/apps/web/lib/hooks/useBookmarkImport.ts
@@ -3,7 +3,8 @@
 import { useState } from "react";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { useMutation } from "@tanstack/react-query";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import {
   useCreateBookmarkWithPostHook,
@@ -13,7 +14,6 @@ import {
   useAddBookmarkToList,
   useCreateBookmarkList,
 } from "@karakeep/shared-react/hooks/lists";
-import { api } from "@karakeep/shared-react/trpc";
 import {
   importBookmarksFromFile,
   ImportSource,
@@ -34,13 +34,14 @@ export interface ImportProgress {
 
 export function useBookmarkImport() {
   const { t } = useTranslation();
+  const api = useTRPC();
 
   const [importProgress, setImportProgress] = useState<ImportProgress | null>(
     null,
   );
   const [quotaError, setQuotaError] = useState<string | null>(null);
 
-  const apiUtils = api.useUtils();
+  const queryClient = useQueryClient();
   const { mutateAsync: createImportSession } = useCreateImportSession();
   const { mutateAsync: createBookmark } = useCreateBookmarkWithPostHook();
   const { mutateAsync: createList } = useCreateBookmarkList();
@@ -65,8 +66,9 @@ export function useBookmarkImport() {
 
       // Check quota before proceeding
       if (bookmarkCount > 0) {
-        const quotaUsage =
-          await apiUtils.client.subscriptions.getQuotaUsage.query();
+        const quotaUsage = await queryClient.fetchQuery(
+          api.subscriptions.getQuotaUsage.queryOptions(),
+        );
 
         if (
           !quotaUsage.bookmarks.unlimited &&
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",
+        });
+      },
+    }),
+  );
 }