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, 37 deletions

diff --git a/apps/web/components/settings/FeedSettings.tsx b/apps/web/components/settings/FeedSettings.tsx
index a49bb0b2..acf947a3 100644
--- a/apps/web/components/settings/FeedSettings.tsx
+++ b/apps/web/components/settings/FeedSettings.tsx
@@ -16,9 +16,10 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/sonner";
 import { Switch } from "@/components/ui/switch";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ArrowDownToLine,
   CheckCircle,
@@ -61,9 +62,10 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 export function FeedsEditorDialog() {
+  const api = useTRPC();
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
-  const apiUtils = api.useUtils();
+  const queryClient = useQueryClient();
 
   const form = useForm<z.infer<typeof zNewFeedSchema>>({
     resolver: zodResolver(zNewFeedSchema),
@@ -81,16 +83,17 @@ export function FeedsEditorDialog() {
     }
   }, [open]);
 
-  const { mutateAsync: createFeed, isPending: isCreating } =
-    api.feeds.create.useMutation({
+  const { mutateAsync: createFeed, isPending: isCreating } = useMutation(
+    api.feeds.create.mutationOptions({
       onSuccess: () => {
         toast({
           description: "Feed has been created!",
         });
-        apiUtils.feeds.list.invalidate();
+        queryClient.invalidateQueries(api.feeds.list.pathFilter());
         setOpen(false);
       },
-    });
+    }),
+  );
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -191,8 +194,9 @@ export function FeedsEditorDialog() {
 }
 
 export function EditFeedDialog({ feed }: { feed: ZFeed }) {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const apiUtils = api.useUtils();
+  const queryClient = useQueryClient();
   const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
     if (open) {
@@ -204,16 +208,17 @@ export function EditFeedDialog({ feed }: { feed: ZFeed }) {
       });
     }
   }, [open]);
-  const { mutateAsync: updateFeed, isPending: isUpdating } =
-    api.feeds.update.useMutation({
+  const { mutateAsync: updateFeed, isPending: isUpdating } = useMutation(
+    api.feeds.update.mutationOptions({
       onSuccess: () => {
         toast({
           description: "Feed has been updated!",
         });
         setOpen(false);
-        apiUtils.feeds.list.invalidate();
+        queryClient.invalidateQueries(api.feeds.list.pathFilter());
       },
-    });
+    }),
+  );
   const form = useForm<z.infer<typeof zUpdateFeedSchema>>({
     resolver: zodResolver(zUpdateFeedSchema),
     defaultValues: {
@@ -339,44 +344,49 @@ export function EditFeedDialog({ feed }: { feed: ZFeed }) {
 }
 
 export function FeedRow({ feed }: { feed: ZFeed }) {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const apiUtils = api.useUtils();
-  const { mutate: deleteFeed, isPending: isDeleting } =
-    api.feeds.delete.useMutation({
+  const queryClient = useQueryClient();
+  const { mutate: deleteFeed, isPending: isDeleting } = useMutation(
+    api.feeds.delete.mutationOptions({
       onSuccess: () => {
         toast({
           description: "Feed has been deleted!",
         });
-        apiUtils.feeds.list.invalidate();
+        queryClient.invalidateQueries(api.feeds.list.pathFilter());
       },
-    });
+    }),
+  );
 
-  const { mutate: fetchNow, isPending: isFetching } =
-    api.feeds.fetchNow.useMutation({
+  const { mutate: fetchNow, isPending: isFetching } = useMutation(
+    api.feeds.fetchNow.mutationOptions({
       onSuccess: () => {
         toast({
           description: "Feed fetch has been enqueued!",
         });
-        apiUtils.feeds.list.invalidate();
+        queryClient.invalidateQueries(api.feeds.list.pathFilter());
       },
-    });
+    }),
+  );
 
-  const { mutate: updateFeedEnabled } = api.feeds.update.useMutation({
-    onSuccess: () => {
-      toast({
-        description: feed.enabled
-          ? t("settings.feeds.feed_disabled")
-          : t("settings.feeds.feed_enabled"),
-      });
-      apiUtils.feeds.list.invalidate();
-    },
-    onError: (error) => {
-      toast({
-        description: `Error: ${error.message}`,
-        variant: "destructive",
-      });
-    },
-  });
+  const { mutate: updateFeedEnabled } = useMutation(
+    api.feeds.update.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: feed.enabled
+            ? t("settings.feeds.feed_disabled")
+            : t("settings.feeds.feed_enabled"),
+        });
+        queryClient.invalidateQueries(api.feeds.list.pathFilter());
+      },
+      onError: (error) => {
+        toast({
+          description: `Error: ${error.message}`,
+          variant: "destructive",
+        });
+      },
+    }),
+  );
 
   const handleToggle = (checked: boolean) => {
     updateFeedEnabled({ feedId: feed.id, enabled: checked });
@@ -456,8 +466,9 @@ export function FeedRow({ feed }: { feed: ZFeed }) {
 }
 
 export default function FeedSettings() {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const { data: feeds, isLoading } = api.feeds.list.useQuery();
+  const { data: feeds, isLoading } = useQuery(api.feeds.list.queryOptions());
   return (
     <>
       <div className="rounded-md border bg-background p-4">