From a34aa8c4652100e8d7024c12f9e48f67b0eccae4 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Sun, 24 Nov 2024 15:08:29 +0000
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20explicit=20invali?=
 =?UTF-8?q?date=20calls=20(#1445)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(admin)/settings/profile/delete-account-dialog.tsx |  2 --
 .../src/app/[locale]/(auth)/register/register-page.tsx |  2 --
 apps/web/src/app/[locale]/auth/login/login-page.tsx    |  3 ---
 .../src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx |  2 --
 apps/web/src/components/auth/auth-forms.tsx            |  8 +++-----
 apps/web/src/components/create-poll.tsx                |  2 --
 apps/web/src/components/discussion/discussion.tsx      |  5 -----
 apps/web/src/components/participant-dropdown.tsx       |  2 --
 apps/web/src/components/poll/manage-poll.tsx           |  5 -----
 .../components/poll/manage-poll/delete-poll-dialog.tsx |  2 --
 .../poll/manage-poll/finalize-poll-dialog.tsx          |  7 +------
 apps/web/src/components/poll/mutations.ts              |  4 ----
 apps/web/src/components/poll/notifications-toggle.tsx  | 10 ++++------
 apps/web/src/trpc/client.ts                            |  8 ++++++++
 14 files changed, 16 insertions(+), 46 deletions(-)

diff --git a/apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx b/apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx
index b6f1ac699..b4503d097 100644
--- a/apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx
+++ b/apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx
@@ -33,12 +33,10 @@ export function DeleteAccountDialog({
     },
   });
   const { t } = useTranslation();
-  const trpcUtils = trpc.useUtils();
   const posthog = usePostHog();
   const deleteAccount = trpc.user.delete.useMutation({
     onSuccess() {
       posthog?.capture("delete account");
-      trpcUtils.invalidate();
       signOut({
         callbackUrl: "/login",
       });
diff --git a/apps/web/src/app/[locale]/(auth)/register/register-page.tsx b/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
index 36d37541f..48846b808 100644
--- a/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/register/register-page.tsx
@@ -44,7 +44,6 @@ export const RegisterForm = () => {
   });
 
   const { handleSubmit, control, getValues, setError, formState } = form;
-  const queryClient = trpc.useUtils();
   const requestRegistration = trpc.auth.requestRegistration.useMutation();
   const authenticateRegistration =
     trpc.auth.authenticateRegistration.useMutation();
@@ -68,7 +67,6 @@ export const RegisterForm = () => {
               throw new Error("Failed to authenticate user");
             }
 
-            queryClient.invalidate();
 
             posthog?.identify(res.user.id, {
               email: res.user.email,
diff --git a/apps/web/src/app/[locale]/auth/login/login-page.tsx b/apps/web/src/app/[locale]/auth/login/login-page.tsx
index d0070d99f..d0d8dc300 100644
--- a/apps/web/src/app/[locale]/auth/login/login-page.tsx
+++ b/apps/web/src/app/[locale]/auth/login/login-page.tsx
@@ -16,7 +16,6 @@ type PageProps = { magicLink: string; email: string };
 export const LoginPage = ({ magicLink, email }: PageProps) => {
   const session = useSession();
   const posthog = usePostHog();
-  const trpcUtils = trpc.useUtils();
   const magicLinkFetch = useMutation({
     mutationFn: async () => {
       const res = await fetch(magicLink);
@@ -32,8 +31,6 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
             email: updatedSession.user.email,
             name: updatedSession.user.name,
           });
-
-          await trpcUtils.invalidate();
         }
       }
 
diff --git a/apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx b/apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx
index f09bb2c07..02bfc66fd 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx
@@ -23,7 +23,6 @@ export function DuplicateDialog({
   pollTitle,
   ...props
 }: DialogProps & { pollId: string; pollTitle: string }) {
-  const queryClient = trpc.useUtils();
   const duplicate = trpc.polls.duplicate.useMutation();
   const posthog = usePostHog();
   const router = useRouter();
@@ -52,7 +51,6 @@ export function DuplicateDialog({
                     pollId,
                     newPollId: res.id,
                   });
-                  queryClient.invalidate();
                   router.push(`/poll/${res.id}`);
                 },
               },
diff --git a/apps/web/src/components/auth/auth-forms.tsx b/apps/web/src/components/auth/auth-forms.tsx
index 09375bc4f..87a4130b4 100644
--- a/apps/web/src/components/auth/auth-forms.tsx
+++ b/apps/web/src/components/auth/auth-forms.tsx
@@ -7,11 +7,9 @@ import { useForm } from "react-hook-form";
 import { requiredString } from "../../utils/form-validation";
 
 export const verifyCode = async (options: { email: string; token: string }) => {
-  const url = `${
-    window.location.origin
-  }/api/auth/callback/email?email=${encodeURIComponent(options.email)}&token=${
-    options.token
-  }`;
+  const url = `${window.location.origin
+    }/api/auth/callback/email?email=${encodeURIComponent(options.email)}&token=${options.token
+    }`;
 
   const res = await fetch(url);
 
diff --git a/apps/web/src/components/create-poll.tsx b/apps/web/src/components/create-poll.tsx
index 80e0b24f1..eaa261caa 100644
--- a/apps/web/src/components/create-poll.tsx
+++ b/apps/web/src/components/create-poll.tsx
@@ -64,7 +64,6 @@ export const CreatePoll: React.FunctionComponent = () => {
   useUnmount(clear);
 
   const posthog = usePostHog();
-  const queryClient = trpc.useUtils();
   const createPoll = trpc.polls.create.useMutation({
     networkMode: "always",
     onSuccess: () => {
@@ -104,7 +103,6 @@ export const CreatePoll: React.FunctionComponent = () => {
                     last_poll_created_at: new Date().toISOString(),
                   },
                 });
-                queryClient.invalidate();
                 router.push(`/poll/${res.id}`);
               },
             },
diff --git a/apps/web/src/components/discussion/discussion.tsx b/apps/web/src/components/discussion/discussion.tsx
index 2dc27b12f..a98c963c7 100644
--- a/apps/web/src/components/discussion/discussion.tsx
+++ b/apps/web/src/components/discussion/discussion.tsx
@@ -73,7 +73,6 @@ function NewCommentForm({
 
   const posthog = usePostHog();
 
-  const queryClient = trpc.useUtils();
 
   const session = useUser();
 
@@ -88,7 +87,6 @@ function NewCommentForm({
 
   const addComment = trpc.polls.comments.add.useMutation({
     onSuccess: () => {
-      queryClient.polls.comments.invalidate();
       posthog?.capture("created comment");
     },
     onError: (error) => {
@@ -166,9 +164,6 @@ function DiscussionInner() {
 
   const { data: comments } = trpc.polls.comments.list.useQuery(
     { pollId },
-    {
-      staleTime: 1000 * 5,
-    },
   );
   const posthog = usePostHog();
 
diff --git a/apps/web/src/components/participant-dropdown.tsx b/apps/web/src/components/participant-dropdown.tsx
index a894a22e8..e1fd648f8 100644
--- a/apps/web/src/components/participant-dropdown.tsx
+++ b/apps/web/src/components/participant-dropdown.tsx
@@ -195,10 +195,8 @@ const ChangeNameModal = (props: {
   onOpenChange: (open: boolean) => void;
 }) => {
   const posthog = usePostHog();
-  const queryClient = trpc.useUtils();
   const changeName = trpc.polls.participants.rename.useMutation({
     onSuccess: (_, { participantId, newName }) => {
-      queryClient.polls.participants.invalidate();
       posthog?.capture("changed name", {
         participantId,
         oldName: props.oldName,
diff --git a/apps/web/src/components/poll/manage-poll.tsx b/apps/web/src/components/poll/manage-poll.tsx
index 95f359c66..7d919f99c 100644
--- a/apps/web/src/components/poll/manage-poll.tsx
+++ b/apps/web/src/components/poll/manage-poll.tsx
@@ -51,7 +51,6 @@ function PauseResumeToggle() {
           status: "live",
         };
       });
-      queryClient.polls.invalidate();
     },
   });
   const pause = trpc.polls.pause.useMutation({
@@ -63,7 +62,6 @@ function PauseResumeToggle() {
           status: "paused",
         };
       });
-      queryClient.polls.invalidate();
     },
   });
 
@@ -139,9 +137,6 @@ const ManagePoll: React.FunctionComponent<{
         };
       });
     },
-    onSuccess: () => {
-      queryClient.polls.invalidate();
-    },
   });
 
   const [showDeletePollDialog, setShowDeletePollDialog] = React.useState(false);
diff --git a/apps/web/src/components/poll/manage-poll/delete-poll-dialog.tsx b/apps/web/src/components/poll/manage-poll/delete-poll-dialog.tsx
index 3c2867728..611edb302 100644
--- a/apps/web/src/components/poll/manage-poll/delete-poll-dialog.tsx
+++ b/apps/web/src/components/poll/manage-poll/delete-poll-dialog.tsx
@@ -19,11 +19,9 @@ export const DeletePollDialog: React.FunctionComponent<{
   urlId: string;
 }> = ({ open, onOpenChange, urlId }) => {
   const posthog = usePostHog();
-  const queryClient = trpc.useUtils();
   const router = useRouter();
   const deletePoll = trpc.polls.delete.useMutation({
     onSuccess: () => {
-      queryClient.polls.invalidate();
       posthog?.capture("deleted poll");
       onOpenChange(false);
       router.replace("/polls");
diff --git a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
index 0bad3c681..560809ff9 100644
--- a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
+++ b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
@@ -212,12 +212,7 @@ export const FinalizePollForm = ({
 
 export function FinalizePollDialog(props: DialogProps) {
   const poll = usePoll();
-  const queryClient = trpc.useUtils();
-  const scheduleEvent = trpc.polls.book.useMutation({
-    onSuccess: () => {
-      queryClient.invalidate();
-    },
-  });
+  const scheduleEvent = trpc.polls.book.useMutation();
   return (
     <Dialog {...props}>
       <DialogContent size="2xl">
diff --git a/apps/web/src/components/poll/mutations.ts b/apps/web/src/components/poll/mutations.ts
index 74f0c5c10..98ea6bdc6 100644
--- a/apps/web/src/components/poll/mutations.ts
+++ b/apps/web/src/components/poll/mutations.ts
@@ -31,7 +31,6 @@ export const useAddParticipantMutation = () => {
           ];
         },
       );
-      queryClient.polls.participants.list.invalidate({ pollId });
       posthog?.capture("add participant", {
         pollId,
         name,
@@ -83,7 +82,6 @@ export const useDeleteParticipantMutation = () => {
       );
     },
     onSuccess: (_, { participantId }) => {
-      queryClient.polls.participants.list.invalidate({ pollId: poll.id });
       posthog?.capture("remove participant", {
         pollId: poll.id,
         participantId,
@@ -93,11 +91,9 @@ export const useDeleteParticipantMutation = () => {
 };
 
 export const useUpdatePollMutation = () => {
-  const queryClient = trpc.useUtils();
   const posthog = usePostHog();
   return trpc.polls.update.useMutation({
     onSuccess: (_data, { urlId }) => {
-      queryClient.polls.invalidate();
       posthog?.capture("updated poll", {
         id: urlId,
       });
diff --git a/apps/web/src/components/poll/notifications-toggle.tsx b/apps/web/src/components/poll/notifications-toggle.tsx
index 29fcfd336..a43d6af95 100644
--- a/apps/web/src/components/poll/notifications-toggle.tsx
+++ b/apps/web/src/components/poll/notifications-toggle.tsx
@@ -50,7 +50,6 @@ const NotificationsToggle: React.FunctionComponent = () => {
           return [...oldWatchers, { userId: user.id }];
         },
       );
-      queryClient.polls.invalidate();
     },
   });
 
@@ -69,7 +68,6 @@ const NotificationsToggle: React.FunctionComponent = () => {
           return oldWatchers.filter(({ userId }) => userId !== user.id);
         },
       );
-      queryClient.polls.invalidate();
     },
   });
 
@@ -126,11 +124,11 @@ const NotificationsToggle: React.FunctionComponent = () => {
             values={{
               value: isWatching
                 ? t("notificationsOn", {
-                    defaultValue: "On",
-                  })
+                  defaultValue: "On",
+                })
                 : t("notificationsOff", {
-                    defaultValue: "Off",
-                  }),
+                  defaultValue: "Off",
+                }),
             }}
           />
         )}
diff --git a/apps/web/src/trpc/client.ts b/apps/web/src/trpc/client.ts
index 0279218ca..dfaaa6c70 100644
--- a/apps/web/src/trpc/client.ts
+++ b/apps/web/src/trpc/client.ts
@@ -7,4 +7,12 @@ export const trpc = createTRPCNext<AppRouter>({
   config() {
     return trpcConfig;
   },
+  unstable_overrides: {
+    useMutation: {
+      async onSuccess(opts) {
+        await opts.originalFn();
+        await opts.queryClient.invalidateQueries();
+      },
+    },
+  },
 });