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

4 files changed, 21 insertions, 18 deletions

diff --git a/apps/mobile/lib/providers.tsx b/apps/mobile/lib/providers.tsx
index 01d2d5b5..4a7def1d 100644
--- a/apps/mobile/lib/providers.tsx
+++ b/apps/mobile/lib/providers.tsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Toaster } from "sonner-native";
 
-import { TRPCProvider } from "@karakeep/shared-react/providers/trpc-provider";
+import { TRPCSettingsProvider } from "@karakeep/shared-react/providers/trpc-provider";
 
 import { ReaderSettingsProvider } from "./readerSettings";
 import useAppSettings from "./settings";
@@ -20,11 +20,11 @@ export function Providers({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <TRPCProvider settings={settings}>
+    <TRPCSettingsProvider settings={settings}>
       <ReaderSettingsProvider>
         {children}
         <Toaster />
       </ReaderSettingsProvider>
-    </TRPCProvider>
+    </TRPCSettingsProvider>
   );
 }
diff --git a/apps/mobile/lib/session.ts b/apps/mobile/lib/session.ts
index 8eb646cb..9f539693 100644
--- a/apps/mobile/lib/session.ts
+++ b/apps/mobile/lib/session.ts
@@ -1,12 +1,16 @@
 import { useCallback } from "react";
+import { useMutation } from "@tanstack/react-query";
 
 import useAppSettings from "./settings";
-import { api } from "./trpc";
+import { useTRPC } from "./trpc";
 
 export function useSession() {
   const { settings, setSettings } = useAppSettings();
+  const api = useTRPC();
 
-  const { mutate: deleteKey } = api.apiKeys.revoke.useMutation();
+  const { mutate: deleteKey } = useMutation(
+    api.apiKeys.revoke.mutationOptions(),
+  );
 
   const logout = useCallback(() => {
     if (settings.apiKeyId) {
diff --git a/apps/mobile/lib/trpc.ts b/apps/mobile/lib/trpc.ts
index e56968b8..915c265d 100644
--- a/apps/mobile/lib/trpc.ts
+++ b/apps/mobile/lib/trpc.ts
@@ -1,5 +1,3 @@
-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/mobile/lib/upload.ts b/apps/mobile/lib/upload.ts
index 06f007f7..13abae16 100644
--- a/apps/mobile/lib/upload.ts
+++ b/apps/mobile/lib/upload.ts
@@ -1,5 +1,5 @@
 import ReactNativeBlobUtil from "react-native-blob-util";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
 import {
@@ -8,7 +8,7 @@ import {
 } from "@karakeep/shared/types/uploads";
 
 import type { Settings } from "./settings";
-import { api } from "./trpc";
+import { useTRPC } from "./trpc";
 import { buildApiHeaders } from "./utils";
 
 export function useUploadAsset(
@@ -18,13 +18,13 @@ export function useUploadAsset(
     onError?: (e: string) => void;
   },
 ) {
-  const invalidateAllBookmarks =
-    api.useUtils().bookmarks.getBookmarks.invalidate;
+  const api = useTRPC();
+  const queryClient = useQueryClient();
 
-  const { mutate: createBookmark, isPending: isCreatingBookmark } =
-    api.bookmarks.createBookmark.useMutation({
+  const { mutate: createBookmark, isPending: isCreatingBookmark } = useMutation(
+    api.bookmarks.createBookmark.mutationOptions({
       onSuccess: (d) => {
-        invalidateAllBookmarks();
+        queryClient.invalidateQueries(api.bookmarks.getBookmarks.pathFilter());
         if (options.onSuccess) {
           options.onSuccess(d);
         }
@@ -34,7 +34,8 @@ export function useUploadAsset(
           options.onError(e.message);
         }
       },
-    });
+    }),
+  );
 
   const { mutate: uploadAsset, isPending: isUploading } = useMutation({
     mutationFn: async (file: { type: string; name: string; uri: string }) => {