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, 24 insertions, 20 deletions

diff --git a/apps/web/components/admin/CreateInviteDialog.tsx b/apps/web/components/admin/CreateInviteDialog.tsx
index 6738adc9..c8b6be8c 100644
--- a/apps/web/components/admin/CreateInviteDialog.tsx
+++ b/apps/web/components/admin/CreateInviteDialog.tsx
@@ -20,8 +20,9 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/sonner";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { TRPCClientError } from "@trpc/client";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -37,6 +38,8 @@ interface CreateInviteDialogProps {
 export default function CreateInviteDialog({
   children,
 }: CreateInviteDialogProps) {
+  const api = useTRPC();
+  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
@@ -47,25 +50,26 @@ export default function CreateInviteDialog({
     },
   });
 
-  const invalidateInvitesList = api.useUtils().invites.list.invalidate;
-  const createInviteMutation = api.invites.create.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Invite sent successfully",
-      });
-      invalidateInvitesList();
-      setOpen(false);
-      form.reset();
-      setErrorMessage("");
-    },
-    onError: (e) => {
-      if (e instanceof TRPCClientError) {
-        setErrorMessage(e.message);
-      } else {
-        setErrorMessage("Failed to send invite");
-      }
-    },
-  });
+  const createInviteMutation = useMutation(
+    api.invites.create.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: "Invite sent successfully",
+        });
+        queryClient.invalidateQueries(api.invites.list.pathFilter());
+        setOpen(false);
+        form.reset();
+        setErrorMessage("");
+      },
+      onError: (e) => {
+        if (e instanceof TRPCClientError) {
+          setErrorMessage(e.message);
+        } else {
+          setErrorMessage("Failed to send invite");
+        }
+      },
+    }),
+  );
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>