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

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
index 8fd04115..567ac605 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -12,7 +12,8 @@ import BottomActions from "@/components/bookmarks/BottomActions";
 import FullPageError from "@/components/FullPageError";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import useAppSettings from "@/lib/settings";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 import { Settings } from "lucide-react-native";
 import { useColorScheme } from "nativewind";
 
@@ -25,6 +26,7 @@ export default function BookmarkView() {
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
   const { settings } = useAppSettings();
+  const api = useTRPC();
 
   const [bookmarkLinkType, setBookmarkLinkType] = useState<BookmarkLinkType>(
     settings.defaultBookmarkView,
@@ -38,10 +40,12 @@ export default function BookmarkView() {
     data: bookmark,
     error,
     refetch,
-  } = api.bookmarks.getBookmark.useQuery({
-    bookmarkId: slug,
-    includeContent: false,
-  });
+  } = useQuery(
+    api.bookmarks.getBookmark.queryOptions({
+      bookmarkId: slug,
+      includeContent: false,
+    }),
+  );
 
   if (error) {
     return <FullPageError error={error.message} onRetry={refetch} />;
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx
index 8402bb0b..1070207b 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx
@@ -5,15 +5,18 @@ import { useLocalSearchParams } from "expo-router";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import { Text } from "@/components/ui/Text";
 import { useToast } from "@/components/ui/Toast";
+import { useQuery } from "@tanstack/react-query";
 
+import type { ZBookmarkList } from "@karakeep/shared/types/lists";
 import {
   useAddBookmarkToList,
   useBookmarkLists,
   useRemoveBookmarkFromList,
 } from "@karakeep/shared-react/hooks/lists";
-import { api } from "@karakeep/shared-react/trpc";
+import { useTRPC } from "@karakeep/shared-react/trpc";
 
 const ListPickerPage = () => {
+  const api = useTRPC();
   const { slug: bookmarkId } = useLocalSearchParams();
   if (typeof bookmarkId !== "string") {
     throw new Error("Unexpected param type");
@@ -26,13 +29,16 @@ const ListPickerPage = () => {
       showProgress: false,
     });
   };
-  const { data: existingLists } = api.lists.getListsOfBookmark.useQuery(
-    {
-      bookmarkId,
-    },
-    {
-      select: (data) => new Set(data.lists.map((l) => l.id)),
-    },
+  const { data: existingLists } = useQuery(
+    api.lists.getListsOfBookmark.queryOptions(
+      {
+        bookmarkId,
+      },
+      {
+        select: (data: { lists: ZBookmarkList[] }) =>
+          new Set(data.lists.map((l) => l.id)),
+      },
+    ),
   );
   const { data } = useBookmarkLists();
 
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
index 984bc224..64d057f2 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
@@ -6,17 +6,19 @@ import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Text } from "@/components/ui/Text";
 import { useToast } from "@/components/ui/Toast";
 import { useColorScheme } from "@/lib/useColorScheme";
+import { useQuery } from "@tanstack/react-query";
 import { Check, Plus } from "lucide-react-native";
 
 import {
   useAutoRefreshingBookmarkQuery,
   useUpdateBookmarkTags,
 } from "@karakeep/shared-react/hooks/bookmarks";
-import { api } from "@karakeep/shared-react/trpc";
+import { useTRPC } from "@karakeep/shared-react/trpc";
 
 const NEW_TAG_ID = "new-tag";
 
 const ListPickerPage = () => {
+  const api = useTRPC();
   const { colors } = useColorScheme();
   const { slug: bookmarkId } = useLocalSearchParams();
 
@@ -34,22 +36,24 @@ const ListPickerPage = () => {
     });
   };
 
-  const { data: allTags, isPending: isAllTagsPending } = api.tags.list.useQuery(
-    {},
-    {
-      select: React.useCallback(
-        (data: { tags: { id: string; name: string }[] }) => {
-          return data.tags
-            .map((t) => ({
-              id: t.id,
-              name: t.name,
-              lowered: t.name.toLowerCase(),
-            }))
-            .sort((a, b) => a.lowered.localeCompare(b.lowered));
-        },
-        [],
-      ),
-    },
+  const { data: allTags, isPending: isAllTagsPending } = useQuery(
+    api.tags.list.queryOptions(
+      {},
+      {
+        select: React.useCallback(
+          (data: { tags: { id: string; name: string }[] }) => {
+            return data.tags
+              .map((t) => ({
+                id: t.id,
+                name: t.name,
+                lowered: t.name.toLowerCase(),
+              }))
+              .sort((a, b) => a.lowered.localeCompare(b.lowered));
+          },
+          [],
+        ),
+      },
+    ),
   );
   const { data: existingTags } = useAutoRefreshingBookmarkQuery({
     bookmarkId,