diff --git a/apps/web/src/components/discussion/discussion.tsx b/apps/web/src/components/discussion/discussion.tsx
index dbf7fa2b5..5e974e569 100644
--- a/apps/web/src/components/discussion/discussion.tsx
+++ b/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(
- { pollId },
- {
- refetchInterval: 10000, // refetch every 10 seconds
- trpc: {},
- },
- );
+ const { data: comments } = trpc.polls.comments.list.useQuery({ pollId });
const posthog = usePostHog();
+ const queryClient = trpc.useContext();
+
const addComment = trpc.polls.comments.add.useMutation({
onSuccess: () => {
+ queryClient.polls.comments.invalidate();
posthog?.capture("created comment");
},
});
diff --git a/apps/web/src/components/participant-dropdown.tsx b/apps/web/src/components/participant-dropdown.tsx
index c100db810..9f684646a 100644
--- a/apps/web/src/components/participant-dropdown.tsx
+++ b/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,
diff --git a/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx b/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx
index cec31a9f2..d0b8b7b8d 100644
--- a/apps/web/src/components/poll/manage-poll/delete-poll-form.tsx
+++ b/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");
},
});
diff --git a/apps/web/src/components/poll/mutations.ts b/apps/web/src/components/poll/mutations.ts
index 74e449d17..ed27d1f28 100644
--- a/apps/web/src/components/poll/mutations.ts
+++ b/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,
diff --git a/apps/web/src/components/poll/notifications-toggle.tsx b/apps/web/src/components/poll/notifications-toggle.tsx
index 1733e7679..1a57f016b 100644
--- a/apps/web/src/components/poll/notifications-toggle.tsx
+++ b/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 = () => {
>
: }
onClick={async () => {
diff --git a/packages/backend/next/trpc/client.ts b/packages/backend/next/trpc/client.ts
index 5a3d57161..e22fc11d0 100644
--- a/packages/backend/next/trpc/client.ts
+++ b/packages/backend/next/trpc/client.ts
@@ -9,21 +9,6 @@ import { AppRouter } from "../../trpc/routers";
export * from "../../trpc/types";
export const trpc = createTRPCNext({
- 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: [