From 65f6e83f11c82b0ec762e11f3392a80e614ee69a Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 1 Feb 2026 12:29:54 +0000
Subject: 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
---
 apps/web/components/dashboard/preview/ReaderView.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'apps/web/components/dashboard/preview/ReaderView.tsx')

diff --git a/apps/web/components/dashboard/preview/ReaderView.tsx b/apps/web/components/dashboard/preview/ReaderView.tsx
index 9b765d55..4d9bcd6c 100644
--- a/apps/web/components/dashboard/preview/ReaderView.tsx
+++ b/apps/web/components/dashboard/preview/ReaderView.tsx
@@ -1,6 +1,7 @@
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { toast } from "@/components/ui/sonner";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 
 import {
   useCreateHighlight,
@@ -22,11 +23,14 @@ export default function ReaderView({
   style?: React.CSSProperties;
   readOnly: boolean;
 }) {
-  const { data: highlights } = api.highlights.getForBookmark.useQuery({
-    bookmarkId,
-  });
-  const { data: cachedContent, isPending: isCachedContentLoading } =
-    api.bookmarks.getBookmark.useQuery(
+  const api = useTRPC();
+  const { data: highlights } = useQuery(
+    api.highlights.getForBookmark.queryOptions({
+      bookmarkId,
+    }),
+  );
+  const { data: cachedContent, isPending: isCachedContentLoading } = useQuery(
+    api.bookmarks.getBookmark.queryOptions(
       {
         bookmarkId,
         includeContent: true,
@@ -37,7 +41,8 @@ export default function ReaderView({
             ? data.content.htmlContent
             : null,
       },
-    );
+    ),
+  );
 
   const { mutate: createHighlight } = useCreateHighlight({
     onSuccess: () => {
-- 
cgit v1.2.3-70-g09d2