♻️ Remove explicit invalidate calls (#1445)

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",
       });

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,

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();
         }
       }
 

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}`);
                 },
               },

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 = `${
+  const url = `${window.location.origin
-    window.location.origin
+    }/api/auth/callback/email?email=${encodeURIComponent(options.email)}&token=${options.token
-  }/api/auth/callback/email?email=${encodeURIComponent(options.email)}&token=${
+    }`;
-    options.token
-  }`;
 
   const res = await fetch(url);
 

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}`);
               },
             },

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();
 

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,

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);

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");

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();
-  const scheduleEvent = trpc.polls.book.useMutation({
-    onSuccess: () => {
-      queryClient.invalidate();
-    },
-  });
   return (
     <Dialog {...props}>
       <DialogContent size="2xl">

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,
       });

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",
-                  }),
+                }),
             }}
           />
         )}

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();
+      },
+    },
+  },
 });