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
---
 packages/shared-react/hooks/highlights.ts | 93 +++++++++++++++++++------------
 1 file changed, 56 insertions(+), 37 deletions(-)

(limited to 'packages/shared-react/hooks/highlights.ts')

diff --git a/packages/shared-react/hooks/highlights.ts b/packages/shared-react/hooks/highlights.ts
index e642f878..3f6a6e01 100644
--- a/packages/shared-react/hooks/highlights.ts
+++ b/packages/shared-react/hooks/highlights.ts
@@ -1,49 +1,68 @@
-import { api } from "../trpc";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useTRPC } from "../trpc";
+
+type TRPCApi = ReturnType<typeof useTRPC>;
 
 export function useCreateHighlight(
-  ...opts: Parameters<typeof api.highlights.create.useMutation>
+  opts?: Parameters<TRPCApi["highlights"]["create"]["mutationOptions"]>[0],
 ) {
-  const apiUtils = api.useUtils();
-  return api.highlights.create.useMutation({
-    ...opts[0],
-    onSuccess: (res, req, meta, context) => {
-      apiUtils.highlights.getForBookmark.invalidate({
-        bookmarkId: req.bookmarkId,
-      });
-      apiUtils.highlights.getAll.invalidate();
-      return opts[0]?.onSuccess?.(res, req, meta, context);
-    },
-  });
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+  return useMutation(
+    api.highlights.create.mutationOptions({
+      ...opts,
+      onSuccess: (res, req, meta, context) => {
+        queryClient.invalidateQueries(
+          api.highlights.getForBookmark.queryFilter({
+            bookmarkId: req.bookmarkId,
+          }),
+        );
+        queryClient.invalidateQueries(api.highlights.getAll.pathFilter());
+        return opts?.onSuccess?.(res, req, meta, context);
+      },
+    }),
+  );
 }
 
 export function useUpdateHighlight(
-  ...opts: Parameters<typeof api.highlights.update.useMutation>
+  opts?: Parameters<TRPCApi["highlights"]["update"]["mutationOptions"]>[0],
 ) {
-  const apiUtils = api.useUtils();
-  return api.highlights.update.useMutation({
-    ...opts[0],
-    onSuccess: (res, req, meta, context) => {
-      apiUtils.highlights.getForBookmark.invalidate({
-        bookmarkId: res.bookmarkId,
-      });
-      apiUtils.highlights.getAll.invalidate();
-      return opts[0]?.onSuccess?.(res, req, meta, context);
-    },
-  });
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+  return useMutation(
+    api.highlights.update.mutationOptions({
+      ...opts,
+      onSuccess: (res, req, meta, context) => {
+        queryClient.invalidateQueries(
+          api.highlights.getForBookmark.queryFilter({
+            bookmarkId: res.bookmarkId,
+          }),
+        );
+        queryClient.invalidateQueries(api.highlights.getAll.pathFilter());
+        return opts?.onSuccess?.(res, req, meta, context);
+      },
+    }),
+  );
 }
 
 export function useDeleteHighlight(
-  ...opts: Parameters<typeof api.highlights.delete.useMutation>
+  opts?: Parameters<TRPCApi["highlights"]["delete"]["mutationOptions"]>[0],
 ) {
-  const apiUtils = api.useUtils();
-  return api.highlights.delete.useMutation({
-    ...opts[0],
-    onSuccess: (res, req, meta, context) => {
-      apiUtils.highlights.getForBookmark.invalidate({
-        bookmarkId: res.bookmarkId,
-      });
-      apiUtils.highlights.getAll.invalidate();
-      return opts[0]?.onSuccess?.(res, req, meta, context);
-    },
-  });
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+  return useMutation(
+    api.highlights.delete.mutationOptions({
+      ...opts,
+      onSuccess: (res, req, meta, context) => {
+        queryClient.invalidateQueries(
+          api.highlights.getForBookmark.queryFilter({
+            bookmarkId: res.bookmarkId,
+          }),
+        );
+        queryClient.invalidateQueries(api.highlights.getAll.pathFilter());
+        return opts?.onSuccess?.(res, req, meta, context);
+      },
+    }),
+  );
 }
-- 
cgit v1.2.3-70-g09d2