ui: hydrate the react query cache in the client side components

1 files changed, 4 insertions, 4 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
index 1360f966..a72478c1 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
@@ -2,8 +2,7 @@
 
 import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/lib/trpc";
-import { ZBookmark, ZUpdateBookmarksRequest } from "@/lib/types/api/bookmarks";
-import { useRouter } from "next/navigation";
+import { ZBookmark } from "@/lib/types/api/bookmarks";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -15,9 +14,10 @@ import { Archive, MoreHorizontal, RotateCw, Star, Trash2 } from "lucide-react";
 
 export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
-  const router = useRouter();
   const linkId = bookmark.id;
 
+  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
+
   const onError = () => {
     toast({
       variant: "destructive",
@@ -26,7 +26,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
     });
   };
   const onSettled = () => {
-    router.refresh();
+    invalidateBookmarksCache();
   };
   const deleteBookmarkMutator = api.bookmarks.deleteBookmark.useMutation({
     onSuccess: () => {