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, 29 insertions, 25 deletions

diff --git a/apps/web/components/dashboard/lists/LeaveListConfirmationDialog.tsx b/apps/web/components/dashboard/lists/LeaveListConfirmationDialog.tsx
index f2a48062..79d23b6a 100644
--- a/apps/web/components/dashboard/lists/LeaveListConfirmationDialog.tsx
+++ b/apps/web/components/dashboard/lists/LeaveListConfirmationDialog.tsx
@@ -4,7 +4,8 @@ import { ActionButton } from "@/components/ui/action-button";
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import type { ZBookmarkList } from "@karakeep/shared/types/lists";
 
@@ -19,34 +20,37 @@ export default function LeaveListConfirmationDialog({
   open: boolean;
   setOpen: (v: boolean) => void;
 }) {
+  const api = useTRPC();
   const { t } = useTranslation();
   const currentPath = usePathname();
   const router = useRouter();
-  const utils = api.useUtils();
+  const queryClient = useQueryClient();
 
-  const { mutate: leaveList, isPending } = api.lists.leaveList.useMutation({
-    onSuccess: () => {
-      toast({
-        description: t("lists.leave_list.success", {
-          icon: list.icon,
-          name: list.name,
-        }),
-      });
-      setOpen(false);
-      // Invalidate the lists cache
-      utils.lists.list.invalidate();
-      // If currently viewing this list, redirect to lists page
-      if (currentPath.includes(list.id)) {
-        router.push("/dashboard/lists");
-      }
-    },
-    onError: (error) => {
-      toast({
-        variant: "destructive",
-        description: error.message || t("common.something_went_wrong"),
-      });
-    },
-  });
+  const { mutate: leaveList, isPending } = useMutation(
+    api.lists.leaveList.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: t("lists.leave_list.success", {
+            icon: list.icon,
+            name: list.name,
+          }),
+        });
+        setOpen(false);
+        // Invalidate the lists cache
+        queryClient.invalidateQueries(api.lists.list.pathFilter());
+        // If currently viewing this list, redirect to lists page
+        if (currentPath.includes(list.id)) {
+          router.push("/dashboard/lists");
+        }
+      },
+      onError: (error) => {
+        toast({
+          variant: "destructive",
+          description: error.message || t("common.something_went_wrong"),
+        });
+      },
+    }),
+  );
 
   return (
     <ActionConfirmingDialog