♻️ Improve query invalidation (#659)

apps/web/src/components/discussion/discussion.tsx

@@ -25,23 +25,19 @@ interface CommentForm {
 
 const Discussion: React.FunctionComponent = () => {
   const { dayjs } = useDayjs();
-  const queryClient = trpc.useContext();
   const { t } = useTranslation("app");
   const { poll, admin } = usePoll();
 
   const pollId = poll.id;
 
-  const { data: comments } = trpc.polls.comments.list.useQuery(
+  const { data: comments } = trpc.polls.comments.list.useQuery({ pollId });
-    { pollId },
-    {
-      refetchInterval: 10000, // refetch every 10 seconds
-      trpc: {},
-    },
-  );
   const posthog = usePostHog();
 
+  const queryClient = trpc.useContext();
+
   const addComment = trpc.polls.comments.add.useMutation({
     onSuccess: () => {
+      queryClient.polls.comments.invalidate();
       posthog?.capture("created comment");
     },
   });

apps/web/src/components/participant-dropdown.tsx

@@ -95,8 +95,10 @@ const ChangeNameModal = (props: {
   onDone: () => void;
 }) => {
   const posthog = usePostHog();
+  const queryClient = trpc.useContext();
   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/delete-poll-form.tsx

@@ -22,8 +22,10 @@ export const DeletePollForm: React.FunctionComponent<{
   const confirmationText = watch("confirmation");
   const canDelete = confirmationText === confirmText;
   const posthog = usePostHog();
+  const queryClient = trpc.useContext();
   const deletePoll = trpc.polls.delete.useMutation({
     onSuccess: () => {
+      queryClient.polls.invalidate();
       posthog?.capture("deleted poll");
     },
   });

apps/web/src/components/poll/mutations.ts

@@ -16,8 +16,11 @@ export const normalizeVotes = (
 
 export const useAddParticipantMutation = () => {
   const posthog = usePostHog();
+  const queryClient = trpc.useContext();
+
   return trpc.polls.participants.add.useMutation({
     onSuccess: (_, { pollId, name, email }) => {
+      queryClient.polls.participants.list.invalidate({ pollId });
       posthog?.capture("add participant", {
         pollId,
         name,

apps/web/src/components/poll/notifications-toggle.tsx

@@ -20,12 +20,18 @@ const NotificationsToggle: React.FunctionComponent = () => {
   const watchers = data.watchers ?? [];
 
   const { user } = useUser();
-  const isWatching = watchers.some(({ userId }) => userId === user.id);
+  const [isWatching, setIsWatching] = React.useState(() =>
+    watchers.some(({ userId }) => userId === user.id),
+  );
 
   const posthog = usePostHog();
 
   const watch = trpc.polls.watch.useMutation({
+    onMutate: () => {
+      setIsWatching(true);
+    },
     onSuccess: () => {
+      // TODO (Luke Vella) [2023-04-08]: We should have a separate query for getting watchers
       posthog?.capture("turned notifications on", {
         pollId: poll.id,
         source: "notifications-toggle",
@@ -34,6 +40,9 @@ const NotificationsToggle: React.FunctionComponent = () => {
   });
 
   const unwatch = trpc.polls.unwatch.useMutation({
+    onMutate: () => {
+      setIsWatching(false);
+    },
     onSuccess: () => {
       posthog?.capture("turned notifications off", {
         pollId: poll.id,
@@ -42,7 +51,6 @@ const NotificationsToggle: React.FunctionComponent = () => {
     },
   });
 
-  const isUpdating = watch.isLoading || unwatch.isLoading;
   const { openLoginModal } = useLoginModal();
 
   return (
@@ -59,7 +67,6 @@ const NotificationsToggle: React.FunctionComponent = () => {
     >
       <Button
         data-testid="notifications-toggle"
-        loading={isUpdating}
         disabled={poll.demo}
         icon={isWatching ? <BellIcon /> : <BellCrossedIcon />}
         onClick={async () => {

packages/backend/next/trpc/client.ts

@@ -9,21 +9,6 @@ import { AppRouter } from "../../trpc/routers";
 export * from "../../trpc/types";
 
 export const trpc = createTRPCNext<AppRouter>({
-  unstable_overrides: {
-    useMutation: {
-      async onSuccess(opts) {
-        /**
-         * @note that order here matters:
-         * The order here allows route changes in `onSuccess` without
-         * having a flash of content change whilst redirecting.
-         **/
-        await opts.originalFn();
-        if (!opts.meta?.doNotInvalidate) {
-          await opts.queryClient.invalidateQueries();
-        }
-      },
-    },
-  },
   config() {
     return {
       links: [