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, 29 insertions, 19 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/highlights.tsx b/apps/mobile/app/dashboard/(tabs)/highlights.tsx
index 7879081b..8a0a8ae3 100644
--- a/apps/mobile/app/dashboard/(tabs)/highlights.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/highlights.tsx
@@ -4,11 +4,13 @@ import HighlightList from "@/components/highlights/HighlightList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 
-import { api } from "@karakeep/shared-react/trpc";
+import { useTRPC } from "@karakeep/shared-react/trpc";
 
 export default function Highlights() {
-  const apiUtils = api.useUtils();
+  const api = useTRPC();
+  const queryClient = useQueryClient();
   const {
     data,
     isPending,
@@ -17,12 +19,14 @@ export default function Highlights() {
     fetchNextPage,
     isFetchingNextPage,
     refetch,
-  } = api.highlights.getAll.useInfiniteQuery(
-    {},
-    {
-      initialCursor: null,
-      getNextPageParam: (lastPage) => lastPage.nextCursor,
-    },
+  } = useInfiniteQuery(
+    api.highlights.getAll.infiniteQueryOptions(
+      {},
+      {
+        initialCursor: null,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+      },
+    ),
   );
 
   if (error) {
@@ -34,7 +38,7 @@ export default function Highlights() {
   }
 
   const onRefresh = () => {
-    apiUtils.highlights.getAll.invalidate();
+    queryClient.invalidateQueries(api.highlights.getAll.pathFilter());
   };
 
   return (
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index 45c23a28..5719c67c 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -8,9 +8,10 @@ import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { Text } from "@/components/ui/Text";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { useColorScheme } from "@/lib/useColorScheme";
 import { condProps } from "@/lib/utils";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plus } from "lucide-react-native";
 
 import { useBookmarkLists } from "@karakeep/shared-react/hooks/lists";
@@ -84,8 +85,9 @@ export default function Lists() {
   const [showChildrenOf, setShowChildrenOf] = useState<Record<string, boolean>>(
     {},
   );
-  const apiUtils = api.useUtils();
-  const { data: listStats } = api.lists.stats.useQuery();
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+  const { data: listStats } = useQuery(api.lists.stats.queryOptions());
 
   // Check if there are any shared lists
   const hasSharedLists = useMemo(() => {
@@ -116,8 +118,8 @@ export default function Lists() {
   }
 
   const onRefresh = () => {
-    apiUtils.lists.list.invalidate();
-    apiUtils.lists.stats.invalidate();
+    queryClient.invalidateQueries(api.lists.list.pathFilter());
+    queryClient.invalidateQueries(api.lists.stats.pathFilter());
   };
 
   const links: ListLink[] = [
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index 106baec5..2610aa37 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -13,7 +13,8 @@ import { Text } from "@/components/ui/Text";
 import { useServerVersion } from "@/lib/hooks";
 import { useSession } from "@/lib/session";
 import useAppSettings from "@/lib/settings";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 
 export default function Dashboard() {
   const { logout } = useSession();
@@ -22,6 +23,7 @@ export default function Dashboard() {
     setSettings,
     isLoading: isSettingsLoading,
   } = useAppSettings();
+  const api = useTRPC();
 
   const imageQuality = useSharedValue(0);
   const imageQualityMin = useSharedValue(0);
@@ -31,7 +33,7 @@ export default function Dashboard() {
     imageQuality.value = settings.imageQuality * 100;
   }, [settings]);
 
-  const { data, error } = api.users.whoami.useQuery();
+  const { data, error } = useQuery(api.users.whoami.queryOptions());
   const {
     data: serverVersion,
     isLoading: isServerVersionLoading,
diff --git a/apps/mobile/app/dashboard/(tabs)/tags.tsx b/apps/mobile/app/dashboard/(tabs)/tags.tsx
index c0ac2d49..470ff3f3 100644
--- a/apps/mobile/app/dashboard/(tabs)/tags.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/tags.tsx
@@ -8,7 +8,8 @@ import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { SearchInput } from "@/components/ui/SearchInput";
 import { Text } from "@/components/ui/Text";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQueryClient } from "@tanstack/react-query";
 
 import { usePaginatedSearchTags } from "@karakeep/shared-react/hooks/tags";
 import { useDebounce } from "@karakeep/shared-react/hooks/use-debounce";
@@ -23,7 +24,8 @@ interface TagItem {
 export default function Tags() {
   const [refreshing, setRefreshing] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
-  const apiUtils = api.useUtils();
+  const api = useTRPC();
+  const queryClient = useQueryClient();
 
   // Debounce search query to avoid too many API calls
   const debouncedSearch = useDebounce(searchQuery, 300);
@@ -56,7 +58,7 @@ export default function Tags() {
   }
 
   const onRefresh = () => {
-    apiUtils.tags.list.invalidate();
+    queryClient.invalidateQueries(api.tags.list.pathFilter());
   };
 
   const tags: TagItem[] = data.tags.map((tag) => ({