6 files changed, 103 insertions, 78 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",
+        });
+      },
+    }),
+  );
 }
diff --git a/apps/web/lib/providers.tsx b/apps/web/lib/providers.tsx
index dd4e62e7..a56b77c7 100644
--- a/apps/web/lib/providers.tsx
+++ b/apps/web/lib/providers.tsx
@@ -7,14 +7,15 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { Session, SessionProvider } from "@/lib/auth/client";
 import { UserLocalSettingsCtx } from "@/lib/userLocalSettings/bookmarksLayout";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { httpBatchLink, loggerLink } from "@trpc/client";
+import { createTRPCClient, httpBatchLink, loggerLink } from "@trpc/client";
 import superjson from "superjson";
 
 import type { ClientConfig } from "@karakeep/shared/config";
+import type { AppRouter } from "@karakeep/trpc/routers/_app";
 
 import { ClientConfigCtx } from "./clientConfig";
 import CustomI18nextProvider from "./i18n/provider";
-import { api } from "./trpc";
+import { TRPCProvider } from "./trpc";
 
 function makeQueryClient() {
   return new QueryClient({
@@ -58,7 +59,7 @@ export default function Providers({
   const queryClient = getQueryClient();
 
   const [trpcClient] = useState(() =>
-    api.createClient({
+    createTRPCClient<AppRouter>({
       links: [
         loggerLink({
           enabled: (op) =>
@@ -79,8 +80,8 @@ export default function Providers({
     <ClientConfigCtx.Provider value={clientConfig}>
       <UserLocalSettingsCtx.Provider value={userLocalSettings}>
         <SessionProvider session={session}>
-          <api.Provider client={trpcClient} queryClient={queryClient}>
-            <QueryClientProvider client={queryClient}>
+          <QueryClientProvider client={queryClient}>
+            <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
               <CustomI18nextProvider lang={userLocalSettings.lang}>
                 <ThemeProvider
                   attribute="class"
@@ -93,8 +94,8 @@ export default function Providers({
                   </TooltipProvider>
                 </ThemeProvider>
               </CustomI18nextProvider>
-            </QueryClientProvider>
-          </api.Provider>
+            </TRPCProvider>
+          </QueryClientProvider>
         </SessionProvider>
       </UserLocalSettingsCtx.Provider>
     </ClientConfigCtx.Provider>
diff --git a/apps/web/lib/trpc.tsx b/apps/web/lib/trpc.tsx
index 1478684f..d0b27ad6 100644
--- a/apps/web/lib/trpc.tsx
+++ b/apps/web/lib/trpc.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { createTRPCReact } from "@trpc/react-query";
-
-import type { AppRouter } from "@karakeep/trpc/routers/_app";
-
-export const api = createTRPCReact<AppRouter>();
+// Re-export from shared-react to ensure there's only one TRPCProvider context
+// This is necessary because the hooks in shared-react use useTRPC from shared-react
+export { TRPCProvider, useTRPC } from "@karakeep/shared-react/trpc";
diff --git a/apps/web/lib/userSettings.tsx b/apps/web/lib/userSettings.tsx
index 4789e2ba..54518884 100644
--- a/apps/web/lib/userSettings.tsx
+++ b/apps/web/lib/userSettings.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { createContext, useContext } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { ZUserSettings } from "@karakeep/shared/types/users";
 
-import { api } from "./trpc";
+import { useTRPC } from "./trpc";
 
 export const UserSettingsContext = createContext<ZUserSettings>({
   bookmarkClickAction: "open_original_link",
@@ -29,9 +30,12 @@ export function UserSettingsContextProvider({
   userSettings: ZUserSettings;
   children: React.ReactNode;
 }) {
-  const { data } = api.users.settings.useQuery(undefined, {
-    initialData: userSettings,
-  });
+  const api = useTRPC();
+  const { data } = useQuery(
+    api.users.settings.queryOptions(undefined, {
+      initialData: userSettings,
+    }),
+  );
 
   return (
     <UserSettingsContext.Provider value={data}>