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

1 files changed, 22 insertions, 11 deletions

diff --git a/apps/mobile/app/dashboard/search.tsx b/apps/mobile/app/dashboard/search.tsx
index ab89ce8d..0e59c607 100644
--- a/apps/mobile/app/dashboard/search.tsx
+++ b/apps/mobile/app/dashboard/search.tsx
@@ -7,9 +7,13 @@ import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { SearchInput } from "@/components/ui/SearchInput";
 import { Text } from "@/components/ui/Text";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { keepPreviousData } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 
 import { useSearchHistory } from "@karakeep/shared-react/hooks/search-history";
 import { useDebounce } from "@karakeep/shared-react/hooks/use-debounce";
@@ -29,7 +33,12 @@ export default function Search() {
     removeItem: (k: string) => AsyncStorage.removeItem(k),
   });
 
-  const onRefresh = api.useUtils().bookmarks.searchBookmarks.invalidate;
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+
+  const onRefresh = () => {
+    queryClient.invalidateQueries(api.bookmarks.searchBookmarks.pathFilter());
+  };
 
   const {
     data,
@@ -39,14 +48,16 @@ export default function Search() {
     isFetching,
     fetchNextPage,
     isFetchingNextPage,
-  } = api.bookmarks.searchBookmarks.useInfiniteQuery(
-    { text: query },
-    {
-      placeholderData: keepPreviousData,
-      gcTime: 0,
-      initialCursor: null,
-      getNextPageParam: (lastPage) => lastPage.nextCursor,
-    },
+  } = useInfiniteQuery(
+    api.bookmarks.searchBookmarks.infiniteQueryOptions(
+      { text: query },
+      {
+        placeholderData: keepPreviousData,
+        gcTime: 0,
+        initialCursor: null,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+      },
+    ),
   );
 
   const filteredHistory = useMemo(() => {