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, 13 insertions, 9 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
index 3e27dbcb..82387325 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
@@ -7,13 +7,14 @@ import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "@/lib/auth/client";
 import useBulkActionsStore from "@/lib/bulkActions";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import {
   bookmarkLayoutSwitch,
   useBookmarkDisplaySettings,
   useBookmarkLayout,
 } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
+import { useQuery } from "@tanstack/react-query";
 import { Check, Image as ImageIcon, NotebookPen } from "lucide-react";
 import { useTheme } from "next-themes";
 
@@ -64,15 +65,18 @@ function BottomRow({
 }
 
 function OwnerIndicator({ bookmark }: { bookmark: ZBookmark }) {
+  const api = useTRPC();
   const listContext = useBookmarkListContext();
-  const collaborators = api.lists.getCollaborators.useQuery(
-    {
-      listId: listContext?.id ?? "",
-    },
-    {
-      refetchOnWindowFocus: false,
-      enabled: !!listContext?.hasCollaborators,
-    },
+  const collaborators = useQuery(
+    api.lists.getCollaborators.queryOptions(
+      {
+        listId: listContext?.id ?? "",
+      },
+      {
+        refetchOnWindowFocus: false,
+        enabled: !!listContext?.hasCollaborators,
+      },
+    ),
   );
 
   if (!listContext || listContext.userRole === "owner" || !collaborators.data) {