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, 48 insertions, 35 deletions

diff --git a/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx b/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx
index 95a916ff..5d70daaf 100644
--- a/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx
+++ b/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx
@@ -10,7 +10,8 @@ import {
 } from "@/components/ui/card";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, Loader2, Mail, X } from "lucide-react";
 
 interface Invitation {
@@ -27,41 +28,51 @@ interface Invitation {
 }
 
 function InvitationRow({ invitation }: { invitation: Invitation }) {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const utils = api.useUtils();
+  const queryClient = useQueryClient();
 
-  const acceptInvitation = api.lists.acceptInvitation.useMutation({
-    onSuccess: async () => {
-      toast({
-        description: t("lists.invitations.accepted"),
-      });
-      await Promise.all([
-        utils.lists.getPendingInvitations.invalidate(),
-        utils.lists.list.invalidate(),
-      ]);
-    },
-    onError: (error) => {
-      toast({
-        variant: "destructive",
-        description: error.message || t("lists.invitations.failed_to_accept"),
-      });
-    },
-  });
+  const acceptInvitation = useMutation(
+    api.lists.acceptInvitation.mutationOptions({
+      onSuccess: async () => {
+        toast({
+          description: t("lists.invitations.accepted"),
+        });
+        await Promise.all([
+          queryClient.invalidateQueries(
+            api.lists.getPendingInvitations.pathFilter(),
+          ),
+          queryClient.invalidateQueries(api.lists.list.pathFilter()),
+        ]);
+      },
+      onError: (error) => {
+        toast({
+          variant: "destructive",
+          description: error.message || t("lists.invitations.failed_to_accept"),
+        });
+      },
+    }),
+  );
 
-  const declineInvitation = api.lists.declineInvitation.useMutation({
-    onSuccess: async () => {
-      toast({
-        description: t("lists.invitations.declined"),
-      });
-      await utils.lists.getPendingInvitations.invalidate();
-    },
-    onError: (error) => {
-      toast({
-        variant: "destructive",
-        description: error.message || t("lists.invitations.failed_to_decline"),
-      });
-    },
-  });
+  const declineInvitation = useMutation(
+    api.lists.declineInvitation.mutationOptions({
+      onSuccess: async () => {
+        toast({
+          description: t("lists.invitations.declined"),
+        });
+        await queryClient.invalidateQueries(
+          api.lists.getPendingInvitations.pathFilter(),
+        );
+      },
+      onError: (error) => {
+        toast({
+          variant: "destructive",
+          description:
+            error.message || t("lists.invitations.failed_to_decline"),
+        });
+      },
+    }),
+  );
 
   return (
     <div className="flex items-center justify-between rounded-lg border p-4">
@@ -126,10 +137,12 @@ function InvitationRow({ invitation }: { invitation: Invitation }) {
 }
 
 export function PendingInvitationsCard() {
+  const api = useTRPC();
   const { t } = useTranslation();
 
-  const { data: invitations, isLoading } =
-    api.lists.getPendingInvitations.useQuery();
+  const { data: invitations, isLoading } = useQuery(
+    api.lists.getPendingInvitations.queryOptions(),
+  );
 
   if (isLoading) {
     return null;